Question

我有一个内部的DIV容器带有此类labelSection

标签的DIV

<DIV class="form-group labelSection">

以及一系列没有标签labelSection

的其他DIV

<DIV class="form-group questionHidden">

我想知道我是否可以使用标签（labelSection）创建一个类来添加到DIV，当Container中的所有其他DIV都有questionHidden类时，我隐藏它

<DIV class="Container">
        <DIV class="form-group labelSection">to be hidden when all the others are hidden</DIV>

        <DIV class="form-group questionHidden">1</DIV>
        <DIV class="form-group questionHidden">2</DIV>
        <DIV class="form-group">3</DIV>
        <DIV class="form-group questionHidden">4</DIV>

</DIV>

由于

Answer 1

要做到这一点，你需要使用Javascript。只用css是不可能的。

这是一个工作示例

$(function() {
  $(".hideDiv").on('click', function() {
    $(this).parent().addClass("questionHidden");
    var allHidden = true;
    $(".Container .form-group").each(function() {
      if ($(this).hasClass("labelSection")) {
        return true;
      }
      if (!$(this).hasClass("questionHidden")) {
        allHidden = false;
      }
    });
    if (allHidden) {
      $(".labelSection").hide();
    }
  });
});

.questionHidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Container">
  <div class="form-group labelSection">to be hidden when all the others are hidden</div>

  <div class="form-group">1 <button class="hideDiv">Hide</button></div>
  <div class="form-group questionHidden">2 <button class="hideDiv">Hide</button></div>
  <div class="form-group">3 <button class="hideDiv">Hide</button></div>
  <div class="form-group questionHidden">4 <button class="hideDiv">Hide</button></div>
</div>

生成显示的类css：无自动

1 个答案: