jQuery+HTML左侧导航栏，点击显示隐藏二级菜单（每日解决一题）

最新推荐文章于 2024-05-27 17:27:19 发布

Anzzm7

最新推荐文章于 2024-05-27 17:27:19 发布

阅读量863

点赞数 1

文章标签： jquery html 数学建模

本文链接：https://blog.csdn.net/qq_53701704/article/details/131314758

版权

在今天写前端页面时，发现要用二级菜单，通过查找发现这个案例也许可以帮助你解决二级菜单的问题。

HTML代码

 <div class="left">
        <ul>
            <li class="left1" style="border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;">哈哈哈</li>
            <li class="left1" id="one" style="border-bottom: 1px solid #ccc;">知识
                <ul class="two">
                    <li>知识1</li>
                    <li>知识2</li>
                    <li>知识3</li>
                </ul>
            </li>
            <li class="left1" id="three" style="border-bottom: 1px solid #ccc;">1
                <ul class="four">
                    <li><a href="index.html">11</a></li>
                    <li>22</li>
                    <li>33</li>
                </ul>
            </li>
        </ul>
    </div>

CSS代码

 <style>
        .left {
            width: 240px;
            height: 240px;
            float: left;
        }

        .left1 {
            width: 100%;
            font-size: 16px;
            list-style: none;
            float: left;
            padding-bottom: 20px;
            padding-top: 20px;
        }

        .two {
            display: none;
            list-style: none;
        }

        .four {
            display: none;
            list-style: none;

        }
    </style>

JS代码

<script>
    $(function () {
        $("#one").on("click", function () {
            $(this).children(".two").toggle(1);
        });
    })
    $(function () {
        $("#three").on("click", function () {
            $(this).children(".four").toggle(1);
        });
    })
</script>