如何防止随机jQuery切换？

我有一个用于移动导航的列表项。它看起来像这样：如何防止随机jQuery切换？

<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:after { 
    font-family: FontAwesome; 
    font-size: 18px; 
    color: #555555; 
    cursor: pointer; 
    content: "\f078"; 
    position: absolute; 
    right: 5px; 
    top: -30px; 
    z-index: 99; 
}

我使用的包装子菜单（＃子换行）来切换子菜单股利。它的工作非常好。

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

我真的可以在这里使用一些帮助...

在此先感谢。

来源

2016-08-23 Delinx

'id'必须是唯一的* * – dm295

的解决方案已被提出，但我我只想分享我开发的哲学：绝不使用“随机”一词。因为无论发生什么事情都可能由于你所做的一系列程序化选择而发生。这意味着你可以追踪决策并做出不同的决定。把一件事情称为“随机”会消除你想要改变事物的能力。继续保持强大，同行编码！不要让机器人获胜！ – ingernet

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

鉴于这种变化，这听起来像你需要搜索.submenu元素是点击的元素的儿童：

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

来源

2016-08-23 20:06:52

如何防止随机jQuery切换？

回答

相关问题