如何防止隨機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切換？

回答

相關問題