多級菜單導航欄

時間 2019-11-11

標籤多級菜單導航简体版

原文原文鏈接

在一些項目中，都會有許多的導航欄，或者菜單欄，有的是二級菜單，有的是三級菜單，更有的是四級菜單，那麼這時就會很是頭痛，我也是在閒事爲你們寫了這麼一個小demo，但願你們能夠參考一下。javascript

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。