js导航栏点击二级菜单

在JavaScript中创建动态导航栏并处理二级菜单通常涉及以下几个步骤：

1. HTML结构：首先，你需要HTML来表示导航栏和菜单。例如，可以使用`<nav>`标签包裹整个菜单，`<ul>`包含一级菜单项，而每个一级菜单项下用`<li>`包裹一个带`<a>`的列表项，表示二级菜单。

<nav>
  <ul class="navbar">
    <li><a href="#">一级菜单1</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1.1</a></li>
        <li><a href="#">二级菜单1.2</a></li>
      </ul>
    </li>
    <!-- 其他一级菜单项 -->
  </ul>
</nav>

2. CSS样式：设置基本的样式，包括导航栏的位置、字体、颜色等，并隐藏二级菜单初始状态。

.navbar {
  /* 样式 */
}
.submenu {
  display: none;
  position: absolute; /* 隐藏默认显示，定位到一级菜单旁边 */
}

3. JavaScript/jQuery：添加事件监听器来处理点击事件。当用户点击一级菜单项时，切换二级菜单的状态。

$(document).ready(function() {
  // 获取所有一级菜单项
  var navbarItems = $('.navbar li');

  // 为每个一级菜单项添加点击事件
  navbarItems.click(function(e) {
    e.preventDefault(); // 阻止页面跳转

    // 切换当前选中项的子菜单
    $(this).children('.submenu').slideToggle();

    // 移除其他已展开的子菜单
    $('.navbar .submenu').not(this + ' .submenu').slideUp();
  });
});