3行js代码实现伸缩菜单（需要使用jQuery）

最新推荐文章于 2024-09-05 16:06:51 发布

@我是东山啊

最新推荐文章于 2024-09-05 16:06:51 发布

阅读量602

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_53404077/article/details/127097618

版权

本文通过3行JavaScript代码展示了如何利用jQuery创建一个伸缩菜单。包括CSS样式设置、HTML结构布局和关键的JavaScript代码实现，需要注意的是在项目中要正确引入jQuery库。

摘要由CSDN通过智能技术生成

css

<style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            cursor: pointer;
            font-size: 20px;
        }

        ul {
            margin-left: 20px;
            display: none;
            /* height: 0; */
        }
        ul.active {
            display: block;
        }

        ul,
        li {
            color: #999999;
            list-style: none;
        }
    </style>

html

<p>html</p>
    <ul class="active">
        <li>html1</li>
        <li>html2</li>
        <li>html3</li>
    </ul>
    <p>css</p>
    <ul>
        <li>css1</li>
        <li>css2</li>
        <li>css3</li>
    </ul>
    <p>js</p>
    <ul>
        <li>js1</li>
        <li>js2<