jQuery实现可收缩展开的级联菜单示例代码

发布时间：2023-08-03 14:42:36 所属栏目：教程来源：

导读：如果用纯JavaScript代码而不使用框架的话，那么做一个级联菜单也许是一件让人生畏的事情，但有了框架，这件事情就很容易了，这就是框架的好处，极大地提高了开发效率，并且更可靠和易于维护。使用jQuery来实现级联菜

如果用纯JavaScript代码而不使用框架的话，那么做一个级联菜单也许是一件让人生畏的事情，但有了框架，这件事情就很容易了，这就是框架的好处，极大地提高了开发效率，并且更可靠和易于维护。使用jQuery来实现级联菜单的一般步骤如下：

•1.首先使用<ul>和<li>创建一个级联菜单

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <title>itcast.cn的JQuery应用示例：弹出菜单</title>

  <link type="text/css" rel="stylesheet" href="css/menu.css" mce_href="css/menu.css" />

  <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>

  <mce:script type="text/javascript" src="jslib/jquerymenu.js" mce_src="jslib/jquerymenu.js"></mce:script>

</head>

<body>

    <ul>

        <a href="#" mce_href="#">我是菜单1</a>

        <li><a href="#" mce_href="#">我是子菜单1</a></li>

        <li><a href="#" mce_href="#">我是子菜单2</a></li>

    </ul>

    <ul>

        <a href="#" mce_href="#">我是菜单2</a>

        <li><a href="#" mce_href="#">我是子菜单3</a></li>

        <li><a href="#" mce_href="#">我是子菜单4</a></li>

    </ul>

</body>

</html>

•2.编写JavaScript代码，控制级联菜单的收缩

代码如下:

//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏

//需要编写代码，在页面装载时，给所有的主菜单添加onclick的事件

//保证主菜单点击时可以显示或隐藏子菜单

//注册页面装载时执行的方法

$(document).ready(function() {

    //这里需要首先找到所有的主菜单

    //然后给所有的主菜单注册点击事件

    //找到ul中的节点

    var as = $("ul > a");

    as.click(function() {

        //这里需要找到当前ul中的li，然后让li显示出来

        //获取当前被点击的a节点

        var aNode = $(this);

        //找到当前a节点的所有li兄弟字节点

        var lis = aNode.nextAll("li");

        //让子节点显示或隐藏

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!