Question

我有一个具有类（“ .filterTags”）的父Div，其中有两个具有类（“ .tagParent”）的子Div。子div中有一个关闭按钮（x），单击关闭按钮（x）时，相应的子项将不显示。当子div的两个变为不显示时，父div也应该不显示。如何实现这一目标？

$(".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>

Answer 1

您可以添加：

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>

Answer 2

您需要检查隐藏子项的数量是否等于子项总数，例如以下代码段

$(".tagCloser").click(function() {
  $(this).parent(".tagParent").hide();
  let tags = $(this).parents(".filterTags").find(".tagParent");
  let hidden = $(this).parents(".filterTags").find(".tagParent:not(:visible)");
  if (tags.length === hidden.length) {
    $(this).parents(".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>

Answer 3

您可以通过以下两种方式实现这一目标：

在所有子项都隐藏时处理父类
给父母没有布局，布局由孩子们驱动

在所有子项都隐藏时处理父类 您可以创建一个处理孩子的显示/隐藏行为的jquery方法，并在所有孩子消失后向其父类添加一个类（例如“隐藏”）：

<div id="parent">
  <div class="children">
  CHILDREN A
  </div>
  <div class="children">
  CHILDREN B
  </div>
</div>
.hidden {
  display: none;
}

#parent {
  background: red;
  width: 10rem;
  height: 2rem;
  padding: 10px;
  display: flex;
}

#parent.hidden {
  display: none;
}

.children {
  background: blue;
  height: 100%;
}

$('.children').on('click', function(_){
    // store objects in constants for performances
    const $this = $(this);
  const $parent = $this.parent();
  // get the length of parent childrens with hidden class
  // you can also check using :visible selector
  // const {length} = $parent.find(':visible');
  const {length} = $parent.find('.hidden');
  // hide the child
    $this.addClass('hidden');
  // logical example
  // if children count with class hidden is equals to the children count
  // (-1 because we need to consider the current children)
  // then hide the parent
  if(length === $parent.children.length - 1) {
    $parent.addClass('hidden');
  }
})

https://jsfiddle.net/NicolaLC/Ldnz0p9y/

此解决方案很酷，但不是我认为最好的解决方案，因为您仅使用css就可以达到相同的结果（这种情况受您需要做的工作和要获得的结果的限制）

给父母没有布局，布局由孩子们驱动 这是最好的解决方案，其背后的逻辑是父级仅是一个包装器，没有布局并且适合于子级，因此当看不到子级时，父级会自动消失：

<div class="parent">
  <div class="children">
  CHILDREN A
  </div>
  <div class="children">
  CHILDREN B
  </div>
</div>

    .hidden {
      display: none;
    }

    .parent {
      background: red;
      display: flex;
    }

    .children {
      background: blue;
      height: 2rem;
      width: 50%;
      margin: 1rem;
      display: inline-flex;
    }

    .children.hidden {
      display: none;
    }

$('.children').on('click', function(_) {
  $(this).addClass('hidden');
  settimeout(() => {
    $(this).removeClass('hidden');
  }, 5000)
})

https://jsfiddle.net/NicolaLC/kprdht1a/12/

当子部门不显示时如何隐藏父部门

3 个答案: