我有一個簡單的導航結構，它具有用于打開和關閉子選單的切換開關。但是，當我單擊嵌套選單時，切換會起作用，但也會關閉父子選單。如何設定它以便父級不會在單擊嵌套選單時關閉？
jQuery(document).ready(function($) {
//Toggle sub-menus
$('#menu .has-children').on('click', function(event) {
event.preventDefault();
$(this).children('.sub-menu').slideToggle(500);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li>item 1</li>
<li class="has-children">item 2
<ul class="sub-menu">
<li>sub-item 1</li>
</ul>
</li>
<li class="has-children">item 3
<ul class="sub-menu">
<li>sub-item 1</li>
<li class="has-children">sub-item 2
<ul class="sub-menu">
<li>sub-sub-item 1</li>
</ul>
</li>
</ul>
</li>
</ul>uj5u.com熱心網友回復：
event.preventDefault();不會阻止事件在樹上傳播，您需要使用event.stopPropagation();來阻止點擊同時觸發父元素上的點擊事件偵聽器。
（您也可以將其添加到li不帶 的子選單中.has-children，以防止它們關閉父選單，但如果這些導航項鏈接到其他頁面則沒有必要）
jQuery(document).ready(function($) {
//Toggle sub-menus
$('#menu .has-children').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).children('.sub-menu').slideToggle(500);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li>item 1</li>
<li class="has-children">item 2
<ul class="sub-menu">
<li>sub-item 1</li>
</ul>
</li>
<li class="has-children">item 3
<ul class="sub-menu">
<li>sub-item 1</li>
<li class="has-children">sub-item 2
<ul class="sub-menu">
<li>sub-sub-item 1</li>
</ul>
</li>
</ul>
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/377301.html