三级下拉菜单

Posted 终身学习者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三级下拉菜单相关的知识,希望对你有一定的参考价值。

<!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>

 

以上是关于三级下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

下拉菜单 ,三级联动 ,夹其它下拉菜单

ajax实现三级联动下拉菜单

如何制作Excel一级,二级,三级及多级下拉菜单

如何在我的 CSS 下拉菜单中添加第三级?

下拉菜单的三级联动

二三级下拉菜单