jquery - 如何防止随机 jquery 切换？

Question

我有一个用于移动导航的列表项。它看起来像这样:

<div id="menu">
  <ul>
    <li class="menu-item"><a href="#">Menu item 1</a></li>
    <li class="menu-item"><a href="#">Menu item 2</a></li>
    <li class="menu-item"><a href="#">Menu item 3</a>
      <div id="submenu-wrap">
        <ul class="submenu">
          <li class="submenu-item"><a href="#">SubMenu item 1</a></li>
          <li class="submenu-item"><a href="#">SubMenu item 2</a></li>
        </ul> 
      </div>
    </li> 
    <li class="menu-item"><a href="#">Menu item 4</a></li> 
    <li class="menu-item"><a href="#">Menu item 5</a></li>
    <li class="menu-item"><a href="#">Menu item 6</a>
      <div id="submenu-wrap">
        <ul class="submenu">
          <li class="submenu-item"><a href="#">SubMenu item 3</a></li>
          <li class="submenu-item"><a href="#">SubMenu item 4</a></li>
        </ul> 
      </div>    
    </li>     
  </ul> 
</div>

我隐藏了子菜单 (ul)，只有在单击 jquery 切换触发器时才会出现。

这是我的 jquery 的样子:

$('#submenu-wrap').on('click',function(){
     $('.submenu').slideToggle(); 
});     

这是我的 CSS 的样子: #submenu-wrap { position:relative!重要；

#submenu-wrap:after {
    font-family: FontAwesome;
    font-size: 18px;
    color: #555555;
    cursor: pointer;
    content: "\f078";
    position: absolute;
    right: 5px;
    top: -30px;
    z-index: 99;
}

我使用包裹子菜单的 div (#submenu-wrap) 来切换子菜单。 它运行良好。

我遇到的问题是，当点击触发器时，它会打开所有隐藏的子菜单 (ul)。我希望它只打开下一个子菜单。也就是说，只打开它包裹的子菜单。每个触发器都应打开自己的子菜单。

我真的需要一些帮助...

提前致谢。

Answer 1

如 dm295 所述，id 值必须是唯一的。 submenu-wrap 应该是 class 而不是 id。

鉴于这种变化，听起来您需要搜索作为被单击元素的子元素的 .submenu 元素:

$('.submenu-wrap').on('click',function(){
    $(this).find('.submenu').slideToggle(); 
});