多级菜单导航栏

最新推荐文章于 2023-03-24 10:49:37 发布

weixin_30648963

最新推荐文章于 2023-03-24 10:49:37 发布

阅读量162

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yd-MM/p/10032203.html

版权

在一些项目中，都会有许多的导航栏，或者菜单栏，有的是二级菜单，有的是三级菜单，更有的是四级菜单，那么这时就会非常头痛，我也是在闲事为大家写了这么一个小demo，希望大家可以参考一下。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        
        ul li.yiji {
            list-style-image: url(img/-.gif);
        }
        ul li{
            cursor: pointer;
        }
    </style>

    <body>
        <ul>
            <li class="yiji">主题市场
                <ul>
                    <li>运动派
                        <ul>
                            <li>三级菜单a</li>
                            <li>三级菜单b</li>
                            <li>三级菜单c</li>
                            <li>三级菜单d</li>
                        </ul>
                    </li>
                    <li>有车族
                        <ul>
                            <li>三级
                                <ul>
                                    <li>四级</li>
                                    <li>四级</li>
                                    <li>四级</li>
                                </ul>
                            </li>
                            <li>三级</li>
                            <li>三级</li>
                            <li>三级</li>
                        </ul>
                    </li>
                    <li>生活家</li>
                </ul>
            </li>
            <li class="yiji">特色购物
                <ul>
                    <li>淘宝二手</li>
                    <li>拍卖会</li>
                    <li>爱逛街</li>
                    <li>全球购</li>
                    <li>淘女郎</li>
                </ul>
            </li>
            <li class="yiji">优惠促销
                <ul>
                    <li>天天特价</li>
                    <li>免费试用</li>
                    <li>清仓</li>
                    <li>1元起拍</li>
                </ul>
            </li>
            <li>工具</li>
        </ul>
        <div name="dd"><p>dd</p></div>
        <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>  
        <script type="text/javascript">
            //has()匹配含有选择器所匹配的元素的元素
            //is()根据选择器、元素或 jQuery 对象来检测匹配元素集合
            $(function(){
                $("li:has(ul)").click(function(e){
                    if(this == e.target){
                        if($(this).children().is(":hidden")){
                            $(this).css("list-style-image","url(img/-.gif)");
                        }else{
                            $(this).css("list-style-image","url(img/1.gif)");
                        }
                        $(this).children().toggle("slow");
                    }
                    
                })
                $("li:not(:has(ul))").css("list-style","none");
            })
            
        </script>

    </body>

</html>