javascript - 通过使用JS单击按钮来显示div

Question

我正在尝试创建一个通过单击按钮来显示其他内容的功能。

我有一个默认显示内容的脚本 - 如何切换它以便默认隐藏内容并且仅在单击按钮时显示？

function revealContent() {
  var x = document.getElementById("additionalContent");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<div class="col-10 text-center">
  <button class="btn btn-sm btn-primary" onclick="revealContent()">Show More Options...</button>
</div>

<div class="col-10" id="additionalContent">
  <p>Content!</p>
</div>

标签： javascripthtml

Answer 1

您只需要display: none默认应用样式，然后切换它。classList.toggle这是一个很好的用途。您可以执行以下操作：

.hidden {
  display: none;
}

<div class="col-10 text-center">
    <button class="btn btn-sm btn-primary" onclick="revealContent()">Show More Options...</button>
</div>

<div class="col-10 hidden" id="additionalContent">
    <p>Content!</p>
</div>

<script>
    function revealContent() {
        var x = document.getElementById("additionalContent");
        x.classList.toggle('hidden');
    }
</script>