Ajax模拟树状菜单

最新推荐文章于 2021-08-05 18:12:15 发布

Grit_ICPC

最新推荐文章于 2021-08-05 18:12:15 发布

阅读量705

点赞数

分类专栏： Ajax 文章标签： Ajax

本文链接：https://blog.csdn.net/Grit_ICPC/article/details/53045563

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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");
        }
    );
} );