我有一个带有类 (".filterTags") 的父 Div,其中有两个带有类 (".tagParent") 的子 Div。子div里面有一个关闭按钮(x),点击关闭按钮(x)对应的子div变为display none。当子div的两个变成display none时,那么parent div也需要变成none。如何实现?
$(".tagCloser").click(function() {
$(this).parent(".tagParent").hide();
});
.filterTags {
display: flex;
flex-wrap: wrap;
padding: 20px 25px 10px;
background: yellow;
}
.tagParent {
padding: 0px 0px 0px 15px;
background: #e40046;
color: #fff;
font-family: Bold;
border-radius: 5px;
margin: 0px 10px 10px 0px;
display: flex;
}
.tagContent {
align-self: center;
}
.tagCloser {
padding: 7px 10px;
cursor: pointer;
align-self: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filterTags">
<div class="tagParent">
<span class="tagContent">Urgent</span>
<span class="tagCloser">x</span>
</div>
<div class="tagParent">
<span class="tagContent">Popular</span>
<span class="tagCloser">x</span>
</div>
</div>
最佳答案
你可以添加:
if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();
这将检查类 tagParent
是否有任何可见元素如果没有,那么它将隐藏 <div class="filterTags">
演示
$(".tagCloser").click(function() {
$(this).parent(".tagParent").hide();
if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();
});
.filterTags {
display: flex;
flex-wrap: wrap;
padding: 20px 25px 10px;
background: yellow;
}
.tagParent {
padding: 0px 0px 0px 15px;
background: #e40046;
color: #fff;
font-family: Bold;
border-radius: 5px;
margin: 0px 10px 10px 0px;
display: flex;
}
.tagContent {
align-self: center;
}
.tagCloser {
padding: 7px 10px;
cursor: pointer;
align-self: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filterTags">
<div class="tagParent">
<span class="tagContent">Urgent</span>
<span class="tagCloser">x</span>
</div>
<div class="tagParent">
<span class="tagContent">Popular</span>
<span class="tagCloser">x</span>
</div>
</div>
关于jquery - 子div不显示时如何隐藏父div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56167977/