码迷,mamicode.com
首页 > Web开发 > 详细

jquery两行代码实现侧边栏三级折叠菜单

时间:2017-05-12 00:00:34      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:min   重要   ogg   jquer   实现   技术   images   nav   src   

jquery两行代码实现侧边栏三级折叠菜单

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
    <ul id="nav">
        <li><a href="#" id="">00000000001</a>
            <ul>
                <li><a href="#">00001A</a></li>
                <li><a href="#">00002A</a>
                    <ul>
                        <li><a href="">0001</a></li>
                        <li><a href="">0002</a></li>
                        <li><a href="">0003</a></li>
                        <li><a href="">0004</a></li>
                    </ul>
                </li>
                <li><a href="#">00003A</a></li>
            </ul>
        </li>
        <li><a href="#" id="#">00000000002</a>
            <ul>
                <li><a href="#">00001A</a></li>
                <li><a href="#">00002A</a>
                    <ul>
                        <li><a href="">0001</a></li>
                        <li><a href="">0002</a></li>
                        <li><a href="">0003</a></li>
                        <li><a href="">0004</a></li>
                    </ul>
                </li>
                <li><a href="#">00003A</a></li>
            </ul>
        </li>
        <li><a href="#" id="">00000000003</a></li>
        <li><a href="#" id="">00000000004</a>
            <ul>
                <li><a href="#">00001A</a></li>
                <li><a href="#">00002A</a>
                    <ul>
                        <li><a href="">0001</a></li>
                        <li><a href="">0002</a></li>
                        <li><a href="">0003</a></li>
                        <li><a href="">0004</a></li>
                    </ul>
                </li>
                <li><a href="#">00003A</a></li>
            </ul>
        </li>
    </ul>
<style>
    #nav li ul{display: none}   
</style>
</body>
</html>
<script>
    $(‘#nav li >a‘).click(function(){
        //1.单机a标签,a标签的下一个节点展开,再单机一次a标签,a标签的下一个节点收起
        //2.单机其他a标签,展开a标签的下一个节点,关闭a标签父级所有的ul
        
        $(this).next().slideToggle();
        $(this).next().show().parent().siblings().find(‘ul‘).hide();
        
    });
</script>

实现这种树形菜单,结构很重要!

jquery两行代码实现侧边栏三级折叠菜单

标签:min   重要   ogg   jquer   实现   技术   images   nav   src   

原文地址:http://www.cnblogs.com/yz-blog/p/6843145.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!