jquery点击显示二级菜单

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。点击显示二级菜单是一种常见的交互效果，通常用于网站的导航栏。

类型

基于类的切换：通过添加或移除 CSS 类来显示或隐藏菜单。
直接操作样式：通过修改元素的 display 属性来控制显示状态。

应用场景

网站导航：在顶部或侧边栏的导航菜单中常见。
下拉列表：用户点击主选项时展示更多子选项。
弹出窗口：点击按钮后显示额外的信息或表单。

示例代码

以下是一个简单的 jQuery 示例，用于实现点击显示二级菜单的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 二级菜单示例</title>
    <style>
        .submenu {
            display: none;
        }
        .menu-item:hover .submenu {
            display: block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul class="menu">
    <li class="menu-item">
        主菜单1
        <ul class="submenu">
            <li>子菜单1-1</li>
            <li>子菜单1-2</li>
        </ul>
    </li>
    <li class="menu-item">
        主菜单2
        <ul class="submenu">
            <li>子菜单2-1</li>
            <li>子菜单2-2</li>
        </ul>
    </li>
</ul>

<script>
$(document).ready(function(){
    $('.menu-item').click(function(event){
        event.stopPropagation(); // 阻止事件冒泡
        $(this).find('.submenu').slideToggle('fast'); // 切换显示状态
    });
});
</script>

</body>
</html>