在我想在單擊帶有子導航的另一個鏈接時關閉所有子導航的選單上作業，它目前只折疊同一級別的子導航，而不是更深的導航。
例子：
- 單擊 A1 > A2A > A3A > A4A
- 然后點擊B1
- 再次點擊 A1
- 你看到 A2A、A3A 和 A4A 仍然完全展開
$('li.has-children').click(function() {
$(this).children('.wrap').addClass('active');
$(this).closest('ul').children('li').not(this).children('.wrap').removeClass('active');
});ul,
ul li {
margin:0;
padding:0;
list-style:none;
}
.wrap {
display: none;
}
.active {
display: inline-block;
}
.has-children-level1 {
display:inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="has-children has-children-level1">
<a class="">link A1</a>
<div class="wrap wrap-0">
<ul>
<li class="has-children has-children-level2">
<a class="">link A2A</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link A3A</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link A4A</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level2">
<a class="">link A2B</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link A3B</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link A4B</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level1">
<a class="">link B1</a>
<div class="wrap wrap-0">
<ul>
<li class="has-children has-children-level2">
<a class="">link B2A</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link B3A</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link B4A</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level2">
<a class="">link B2B</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link B3B</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link B4B</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>uj5u.com熱心網友回復：
我稍微修改了您的邏輯以檢查是否單擊了父級別，從所有子元素中洗掉了活動類。
if($(this).hasClass('has-children')){
$(this).siblings().find('*').removeClass('active')
}
另外，我添加e.stopPropagation()了防止bubbling點擊事件
Working Code below
顯示代碼片段
$('li.has-children').click(function(e) {
e.stopPropagation();
$(this).children('.wrap').addClass('active');
if ($(this).hasClass('has-children')) {
$(this).siblings().find('*').removeClass('active')
}
});ul,
ul li {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
display: none;
}
.active {
display: inline-block;
}
.has-children-level1 {
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="has-children has-children-level1">
<a class="">link A1</a>
<div class="wrap wrap-0">
<ul>
<li class="has-children has-children-level2">
<a class="">link A2A</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link A3A</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link A4A</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level2">
<a class="">link A2B</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link A3B</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link A4B</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level1">
<a class="">link B1</a>
<div class="wrap wrap-0">
<ul>
<li class="has-children has-children-level2">
<a class="">link B2A</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link B3A</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link B4A</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level2">
<a class="">link B2B</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link B3B</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link B4B</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>uj5u.com熱心網友回復：
在設定活動之前，請移除所有其他活動。
$('li.has-children').click(function() {
var $this = $(this)
var p = $this.parents('.has-children');
$('div.wrap').not(this).removeClass('active')
if(p.length){
$(`.wrap`,p).not($this.find('.wrap .wrap')).addClass('active')
}
else{
$this.children('.wrap').addClass('active');
}
return false
});ul,
ul li {
margin:0;
padding:0;
list-style:none;
}
.wrap {
display: none;
}
.active {
display: block;
}
.has-children-level1 {
display: block;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="has-children has-children-level1">
<a class="">link A1</a>
<div class="wrap wrap-0">
<ul>
<li class="has-children has-children-level2">
<a class="">link A2A</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link A3A</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link A4A</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level2">
<a class="">link A2B</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link A3B</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link A4B</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level1">
<a class="">link B1</a>
<div class="wrap wrap-0">
<ul>
<li class="has-children has-children-level2">
<a class="">link B2A</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link B3A</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link B4A</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children has-children-level2">
<a class="">link B2B</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children has-children-level3">
<a class="">link B3B</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children has-children-level4">
<a class="">link B4B</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441189.html
標籤：javascript jQuery