我怎样才能在 JavaScript 中 hide/show 一个 div 容器？

Question

我正在尝试通过单击按钮将 toggleClass 方法用于 hiding/showing 一个 div 容器。因此我使用 jQuery。它在 class .hide 设置为 visibility: hidden 时有效。

但是我想让 div 容器 .aufklapp-container 在我单击按钮时可见。对于 CSS 我试过这个：

.table { visibility: hidden } 
.hide { visibility: visible }

但是 div-容器不会变为可见。它保持隐藏。请帮助我，我不明白。

$(document).ready(function() {
  $(".aufklapp-button").click(function() {
    $(".aufklapp-container").toggleClass("hide");
  });
});

.aufklapp-button {
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 30pt;
  text-align: center;
  color: white;
  background: #7F868D;
  padding: 5px 30px 10px 30px;
  width: 60%;
  border: none;
  border-radius: 35px;
  cursor: pointer;
}

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
  visibility: hidden;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

.hide {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="container-button">
  <input class="aufklapp-button" type="button" value="Platzhalter für Kategorie"></input>
  <div class="aufklapp-container">
    <table class="table">
      <tbody>
        <tr>
          <td></td>
          <td>Zielerreichung in %</td>
        </tr>
        <tr>
          <td>Kriterium 1</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 2</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 3</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 4</td>
          <td>Regler</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

问题是因为您在 table 元素而不是父元素 .aufklapp-container 上设置了 visibility: hidden，因此切换 class 没有任何作用。如果您将 visibility 属性移动到 CSS 中正确的 class，则代码有效：

$(document).ready(function() {
  $(".aufklapp-button").click(function() {
    $(".aufklapp-container").toggleClass("hide");
  });
});

.aufklapp-button {
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 30pt;
  text-align: center;
  color: white;
  background: #7F868D;
  padding: 5px 30px 10px 30px;
  width: 60%;
  border: none;
  border-radius: 35px;
  cursor: pointer;
}

.aufklapp-container {
  visibility: hidden;
}

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

.hide {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="container-button">
  <input class="aufklapp-button" type="button" value="Platzhalter für Kategorie" />
  <div class="aufklapp-container">
    <table class="table">
      <tbody>
        <tr>
          <td></td>
          <td>Zielerreichung in %</td>
        </tr>
        <tr>
          <td>Kriterium 1</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 2</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 3</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 4</td>
          <td>Regler</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

此外，顺便说一句，将 hide class 重命名为 show 更有意义，因为这样更符合其行为。

Answer 2

除了之前给出的方法之外的另一种选择是稍微更改代码，将 JavaScript 代码更改为：

$(document).ready(function() {
  var aufklapp = $(".aufklapp-container");
  $(".aufklapp-button").click(function() {
    aufklapp.attr("hidden", aufklapp.attr('hidden') ? null : true);
  });
});

并将隐藏属性作为 <div class="aufklapp-container" hidden> 添加到 HTML 元素，对于 CSS 的最后一个，删除 .hide class 和visibility: hidden; 属性来自你的 .table class.

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

这将为您的代码带来 3 个好处：(1) 使用标记上的隐藏属性实现更好的可访问性（如果需要，您可以将其与其他人一起使用 ARIA attributes）； (2) 你通过引用缓存你的容器，避免在每次点击时使用 jQuery 代码 $(".aufklapp-container") 获取它；并且 (3) 在您的代码库中少了一个 CSS 泛型 class。

我怎样才能在 JavaScript 中 hide/show 一个 div 容器？

How can I hide/show a div-container in JavaScript?

javascript

css

jquery

toggle

typescript