简单的jquery实现收缩列表菜单

最新推荐文章于 2025-07-09 13:24:42 发布

原创最新推荐文章于 2025-07-09 13:24:42 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #菜单收缩

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的商品分类菜单实现方案，使用HTML和JavaScript技术，通过点击一级菜单项展开对应的子菜单列表，并高亮当前选中的菜单项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .level1 ul{
            display: none;
        }
        .current{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul class="menu">
            <li class="level1">
                <a href="#none">衬衫</a>
                <ul>
                    <li> <a href="#">短袖衬衫</a> </li>
                    <li> <a href="#">长袖衬衫</a> </li>
                    <li> <a href="#">长袖T恤</a> </li>
                    <li> <a href="#">短袖T恤</a> </li>
                </ul>
            </li>
            <li class="level1">
                <a href="#none">卫衣</a>
                <ul>
                    <li> <a href="#">开襟卫衣</a> </li>
                    <li> <a href="#">套头卫衣</a> </li>
                    <li> <a href="#">运动卫衣</a> </li>
                    <li> <a href="#">童装卫衣</a> </li>
                </ul>
            </li>
            <li class="level1">
                <a href="#none">裤子</a>
                <ul>
                    <li> <a href="#">短裤</a> </li>
                    <li> <a href="#">休闲裤</a> </li>
                    <li> <a href="#">牛仔裤</a> </li>
                    <li> <a href="#">卡其裤</a> </li>
                </ul>
            </li>
        </ul>

    </div>
    <script src="public/jquery.js"></script>
    <script>
        $('.level1>a').click(function () {
            $(this).addClass('current')
            .next().show()
            .parent().siblings().children('a').removeClass('current')
            .next().hide();
            return false;
        })
    </script>
</body>
</html>