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

为了实现一个jQuery+HTML的左侧导航栏，并在点击时显示或隐藏二级菜单，你可以按照以下步骤进行：

1. HTML结构：

<div class="sidebar">
    <ul class="nav">
        <li class="nav-item">
            <a href="#" class="nav-link">菜单1</a>
            <ul class="sub-menu">
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">菜单2</a>
            <ul class="sub-menu">
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ul>
        </li>
    </ul>
</div>

2. CSS样式（可根据需要调整）：

.sidebar {
    width: 200px;
}

.nav-item {
    position: relative;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    padding-left: 10px;
}

3. jQuery脚本：

首先，确保你已经引入了jQuery库。然后，添加以下脚本以实现点击显示/隐藏二级菜单的功能：

$(document).ready(function() {
    $('.nav-link').click(function(e) {
        e.preventDefault(); // 阻止链接的默认行为
        $(this).next('.sub-menu').slideToggle(); // 切换显示/隐藏二级菜单
    });
});

注意：这里我使用了.slideToggle()方法，它是一个自定义的jQuery动画效果，用于滑动切换元素的可见性。如果你没有这个方法，可以使用.slideToggle()的替代实现，或者直接使用.toggle()来简单切换元素的可见性。

4. 优化与调整：

   • 根据需要调整CSS样式以适应你的网站设计。
   • 如果二级菜单有多个层级，你可能需要使用递归函数或更复杂的逻辑来处理多级菜单的显示与隐藏。
   • 考虑添加动画效果以提升用户体验，如使用CSS transitions或jQuery的动画函数。

完成以上步骤后，你应该有一个可以工作的左侧导航栏，点击主菜单时会显示或隐藏相应的二级菜单。