jquery简易的三级导航

时间:2021-04-30 16:03:46
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_732107_8hzp99uacq9.css"/>
        <style type="text/css">
            li {
                list-style: none;
                background-color: #1b1a1a;
                color: #efefef;
                line-height: 40px;
                cursor: pointer;
            }
            li div:hover {
                background-color: #000;
                color: #fff;
                box-shadow: 0 0 10px rgba(0,0,0,0.8);
                text-shadow: 0 0 2px rgba(255,255,255,0.8);
            }
            ul {
                padding-left: 0;
                width: 300px;
                overflow: hidden;
            }
            .first i {
                margin-right: 4px;
                font-size: 14px;
            }
            .second div {
                padding-left: 28px;
            }
            .third div {
                padding-left: 46px;
            }
            .second, .third {
                display: none;
            }
            .qf {
                float: right;
                padding-right: 10px;
            }
        </style>
    </head>
    <body>
        <ul class="first">
            <li>
                <div>一级菜单 <i class="qf qf-shop-plus"></i></div>
                <ul class="second">
                    <li>
                        <div>二级菜单</div>
                    </li>
                    <li>
                        <div>二级菜单</div>
                    </li>
                    <li>
                        <div>二级菜单 <i class="qf qf-shop-plus"></i></div>
                        <ul class="third">
                            <li><div>三级菜单 </div></li>
                            <li><div>三级菜单 </div></li>
                            <li><div>三级菜单 </div></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <div> 一级菜单 <i class="qf qf-shop-plus"></i></div>
                <ul class="second">
                    <li>
                        <div>二级菜单 <i class="qf qf-shop-plus"></i></div>
                        <ul class="third">
                            <li><div>三级菜单 </div></li>
                            <li><div>三级菜单 </div></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <!-- <script type="text/javascript" src="jquery.js" ></script> -->
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
        <script type="text/javascript">
//给所点击的li添加点击事件,find()找到对所有对应的子元素,添加slideToggle()的方法,组织事件冒泡
        $('.first>li').on('click',function(){
            $(this).find('.second').slideToggle();
            event.stopPropagation();
        })
        $('.second>li').on('click',function(){
            $(this).find('.third').slideToggle();
            event.stopPropagation();
        })
        $("li").on('click', function() {
                event.stopPropagation();
            })
//替换类名,toggleClass()的方法iconfont的类名切换,以达到加号换减号的方法
        $("li:has(ul)").on('click',function(){
            var i = $(this).children('div').children('i');
            i.toggleClass('qf-shop-plus').toggleClass('qf-shop-jianhaocu');
        })
        </script>
    </body>
</html>