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 { 位置：相对！重要; }

#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(); 
});

如何防止随机jquery切换？

1 个答案: