我有一个列表项。每个列表都包含类 .filter-tag。 当我点击每个 .filter-tag 时,它会隐藏起来。 这是示例: FIDDLE
但我想当所有列表项都被隐藏时,该列表项的 parent(.filter-tag-has-content) 也应该隐藏。意味着如果没有列表元素可见,父级也会隐藏,但如果可见,父级也应保持可见。
HTML
<div class="filter-tag-container">
<ul class="filter-tag-has-content">
<li class="filter-tag" id="fl-1">
<span class="tag-name">Filter Option 1</span>
<span class="fa fa-times"></span>
</li>
<li class="filter-tag" id="fl-2">
<span class="tag-name">Filter Option 2</span>
<span class="fa fa-times"></span>
</li>
<li class="filter-tag" id="fl-3">
<span class="tag-name">Filter Option 3</span>
<span class="fa fa-times"></span>
</li>
<li class="filter-tag" id="fl-4">
<span class="tag-name">Filter Option 4</span>
<span class="fa fa-times"></span>
</li>
<li class="filter-tag" id="fl-5">
<span class="tag-name">Filter Option 5</span>
<span class="fa fa-times"></span>
</li>
</ul>
</div>
JS
$('.filter-tag').click(function(){
$(this).hide();
});
最佳答案
单击可见列表项时检查它们的长度。一旦没有剩余,隐藏列表。
$('.filter-tag').click(function(){
$(this).hide();
if(!$('.filter-tag:visible').length) $('ul.filter-tag-has-content').hide()
});
或者在多个容器上使用:
$('.filter-tag').click(function(){
$(this).hide();
if(!$(this).siblings(':visible').length)$(this).parent().hide()
});
关于javascript - 如果没有子元素,父元素应该隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25329503/