javascript - 如何在JavaScript中隐藏/显示div容器？

我正在尝试使用toggleClass方法来通过单击按钮来隐藏/显示div容器。因此，我使用jQuery。当类.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>

最佳答案

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

$(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类重命名为show会更有意义，因为这样可以更好地匹配其行为。