jquery左侧二级菜单

jQuery 左侧二级菜单通常是一个常见的网页布局组件，用于导航栏设计，它允许用户在一个主菜单中点击某个选项后，展开更详细的子菜单。使用 jQuery 可以方便地实现这种动态效果，通常步骤如下：

1. HTML 结构：创建一个包含主菜单和子菜单的 HTML 结构，如 `<ul>` 和 `<li>` 用于构建菜单层级。

<nav class="navbar">
    <ul class="main-menu">
        <li><a href="#">主菜单项1</a></li>
        <li class="sub-menu-item">
            <a href="#">主菜单项2</a>
            <ul class="sub-menu">
                <li><a href="#">子菜单项1</a></li>
                <li><a href="#">子菜单项2</a></li>
            </ul>
        </li>
        <!-- 其他菜单项 -->
    </ul>
</nav>

2. CSS 样式：为菜单添加基本样式，如字体、颜色、位置等。

3. jQuery 代码：编写 JavaScript 代码来处理菜单的展开和折叠。

$(document).ready(function() {
    // 鼠标悬停时展开二级菜单
    $('.main-menu li').hover(function() {
        $(this).find('.sub-menu').slideToggle();
    });
});