前端樹狀菜單

時間  2019-11-11
標籤 前端 樹狀 菜單 简体版
原文   原文鏈接

由於忽然間用到這個東西，可是也不清楚別人是怎麼作的，就本身根據本身的想法來了，效果還不錯、javascript

先思路，後代碼：css

    思路：兩個ul嵌套，把外層的ul顯示出來，裏層的ul先用樣式表隱藏，當點擊的時候，當前li下的ul狀態更改成顯示，就能夠了html

              當點擊其餘的時候，先把外層li下全部的ul樣式全爲隱藏，而後再顯示當前下的ul，大致思路就是這樣
java

    代碼：jquery

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
        li{list-style-type: none; float: left;}
        .u{width: 120px;}
        .u .tre{font-size: 18px; line-height: 22px;}
        .u .tre .l{width: 120px; height: 20px;}
        .u .tre .sub{display: none; width: 70px;}
        .u .tre .sub li{font-size: 14px; line-height: 18px; float: left;}
    </style>

</head>
<body>
    <ul>
        <li>
            <div>
            <a href="#">青龍</a>
            </div>
            <ul>
                <li>小青龍</li>
                <li>小青龍</li>
            </ul>
        </li>
        <li>
            <div>
            <span>白虎</span>
            </div>
            <ul>
                <li>小白虎</li>
                <li>小白虎</li>
            </ul>
        </li>
        
        <li>
            <div>
            <span>朱雀</span>
            </div>
            <ul>
                <li>小朱雀</li>
                <li>小朱雀</li>
            </ul>
        </li>
        <li>
            <div>
            <span>玄武</span>
            </div>
            <ul>
                <li>小玄武</li>
                <li>小玄武</li>
            </ul>
        </li>
    </ul>


    <script type="text/javascript">
        $(".l").click(function(){
            $(".sub").hide();
            $(this).parent().find(".sub").show();
        });
    </script>
</body>
</html>ide

具體樣式什麼的，本身去調，這個是豎着的，橫着的，和這個相似，定一下位應該就成
this

今天狀態不佳，又犯了個錯，  Js代碼放在head中， 就說沒反應， 真是醉了。。。
spa

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程