html - 生成显示: none automatically的类css

Question

我有一个 DIV 容器，里面有带有此类 labelSection 标签的 DIV

<DIV class="form-group labelSection">

和一系列没有标签 labelSection 的其他 DIV

<DIV class="form-group questionHidden">

我想知道当容器中的所有其他 DIV 都具有 questionHidden 类时，我是否可以创建一个类以使用我隐藏的标签 (labelSection) 添加到 DIV

<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>