如何在同一個類別點擊時只選擇父元素

我遇到菜單問題。我會讓代碼解釋。

<ul class="menu"> 
    <li>Item in 1</li> 
    <li class="has-children"> 
     Item in 2 
     <ul class="sub-menu"> 
      <li class="has-children"> 
       Item in 3 
       <ul class="sub-menu"> 
        <li>Item in 4</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>Item in 1</li> 
    <li>Item in 1</li> 
</ul>

我有一個結構如上所示的移動菜單。當我點擊<li class="has-children">而沒有顯示第三級項目時，我想要做的是有第二級菜單切換顯示。

然後當第二級<li class="has-children">被點擊時，有第三級項目切換顯示。

這裏就是我想：當我希望點擊2級<li class="has-children">切換3級項目發生

$('.menu').children('.has-children').click(function(e){ 
    e.preventDefault(); 
    $(this).children('.sub-menu').slideToggle(); 
});

的問題。但是，反而會發生整個菜單被切換回來。

這裏的爵士小提琴：http://jsfiddle.net/yb9khz6w/

現在我想.children()只選擇直接兄弟，爲什麼二級菜單觸發它的父？

幫助任何人？提前致謝。

來源

2014-09-26 Bobby

您可以嘗試使用「上（）」。

$(function() { 
 
    $('.has-children').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    $(this).children().slideToggle(); 
 
    }); 
 
});

.sub-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li>Item in 1</li> 
 
    <li class="has-children">Item in 2 
 
    <ul class="sub-menu"> 
 
     <li class="has-children">Item in 3 
 
     <ul class="sub-menu"> 
 
      <li>Item in 4</li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li>Item in 1</li> 
 
    <li>Item in 1</li> 
 
</ul>

來源

2014-09-26 08:33:37 Arvind

非常感謝，這個工作！我不知道e。stopPropagation（）; – Bobby 2014-09-26 08:56:27

@Bobby，我很高興它幫助你:) – Arvind 2014-09-26 09:05:25

試着改變你的Javascript功能來：

$('.menu').on("click", ".has-children", function(e){ 
    $(this).children('.sub-menu').slideToggle(); 
    e.stopPropagation(); 
});

Fiddle

這改變了事件的menu類中的點擊綁定到任何has-children類的，這保證了在參考this Javascript涉及被點擊的has-children類項目。

的e.stopPropagation()確保在has-children類的點擊並不會傳播到該項目點擊可包含在has-children類的其他實例

來源

2014-09-26 08:30:57 RobF

希望這會爲你工作

$('.menu').on("click", ".has-children", function(e){ 
    $(this).children('.sub-menu').slideToggle(); 
    e.stopPropagation(); 
});

來源

2014-09-26 08:34:19

感謝您的快速回答，我只是因爲活生生的例子才選擇了答案。 – Bobby 2014-09-26 08:57:28

@Bobby ..它的好:) – 2014-09-26 09:05:50

嘗試小提琴Click here

我認爲，如果你想顯示項目4上項目2爲點擊以及你可以使用

$(this).find('.sub-menu').slideToggle();

代替

$(this).children('.sub-menu').slideToggle();

希望它可以幫助........

來源

2014-09-26 08:40:34 Mayank

如何在同一個類別點擊時只選擇父元素

回答

相關問題