Ajax模拟树状菜单

发布时间：2020-12-16 03:36:38 所属栏目：百科来源：网络整理

导读：html: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title应用实例弹出菜单/title script type="text/javascript" src="jslib/jquery-3.1.1.js"/script script type="text/javascript" src="jslib/jquerymenu.js"/script link href="css/menu.css"

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用实例弹出菜单</title>
    <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="jslib/jquerymenu.js"></script>
    <link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
    <ul >
        <a href="#">菜单1</a>
        <li>子菜单1</li>
        <li>子菜单2</li>
    </ul>

    <ul >
        <a href="#">菜单2</a>
        <li>子菜单3</li>
        <li>子菜单4</li>
    </ul>
</body>
</html>

css:

/*使用标签选择器进行缩进*/
li{
    list-style:none;
    margin-left: 18px;
    display: none;
}
a{
    text-decoration: none;
}

javascript:

//按主菜单子菜单会显示或者消失
//在页面装载的时候给所有的主菜单进行onclick事件

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

$(document).ready( function(){
    //先找所有的主菜单，然后给他们进行点击事件
    var as = $("ul").children("a");
    //或者是var uls  = $("ul > a");
    as.click(
        function(){
            var aNode = $(this);

            //找到相应的兄弟节点
            var lis = aNode.nextAll("li");
            //切换菜单当前的状态toggle
            lis.toggle("show");
        }
    );
} );

（编辑：李大同）

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