Javascript 切换按钮：将操作顺序从 show/hide 更改为 hide/show

Question

找到了以下脚本

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

为了制作文本框的切换按钮。问题是 脚本最初显示文本框然后隐藏它。我想先隐藏再显示。否则 最初的第一次点击不会做任何事情，所以用户会认为按钮坏了。

为了解释更多，我将它与

一起使用

    <button type="button" class="collapsible">Toggle document map</button>
    <div class="content">
    <p>bla..bla</p>
    </div>

和以下 css.

  .active, .collapsible:hover {
    background-color: #8511ae;
    color: white; font-weight: bold; text-decoration: underline;
}
  .collapsible {
    background-color: #faf9d8;
    color: #4e3fe3; font-style: italic; font-weight: bold;
    font-family: verdana, sans-serif;
    cursor: pointer;
    padding: 5px;
    width: 35%;
    float: left
    border: 0px solid #8511ae;
    text-align: center;
    outline: none;
    font-size: 15px;
    margin-top: 2%;
    margin-bottom: 0%;
    margin-left: 2%;
    margin-right: 24%;
}
  .content {
    width: 35%;
    float: left;
    padding: 0px;
    border: 0px solid #8511ae;
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 2%;
    margin-right: 3%;
    background-color: #faf9d8;
}

最初content css来自w3schools，还包括

  display: none;
  overflow: hidden;

但由于 我希望文本框在访问页面时最初可见，我在 content css 中留下了以上 2 项].

但是现在，如上所述，我必须单击切换按钮两次 （这是我第一次这样做） 以隐藏文本框。

如何修改上面的 javascript 以便第一次点击隐藏而不是试图使其可见？

我自己尝试了一些更改，但我只是破坏了脚本。这是我制作的第一个网站，如有任何帮助，我们将不胜感激。

Answer 1

只需使用：

if (content.style.display === "none") {
  content.style.display = "block";
} else {
  content.style.display = "none";
}

而不是：

if (content.style.display === "block") {
  content.style.display = "none";
} else {
  content.style.display = "block";
}

这是您的代码：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  });
}

.active, .collapsible:hover {
    background-color: #8511ae;
    color: white; font-weight: bold; text-decoration: underline;
}
  .collapsible {
    background-color: #faf9d8;
    color: #4e3fe3; font-style: italic; font-weight: bold;
    font-family: verdana, sans-serif;
    cursor: pointer;
    padding: 5px;
    width: 35%;
    float: left
    border: 0px solid #8511ae;
    text-align: center;
    outline: none;
    font-size: 15px;
    margin-top: 2%;
    margin-bottom: 0%;
    margin-left: 2%;
    margin-right: 24%;
}
  .content {
    width: 35%;
    float: left;
    padding: 0px;
    border: 0px solid #8511ae;
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 2%;
    margin-right: 3%;
    background-color: #faf9d8;
}

<button type="button" class="collapsible">Toggle document map</button>
    <div class="content">
    <p>bla..bla</p>
    </div>

Answer 2

The style read-only property returns the inline style of an element in the form of a CSSStyleDeclaration

From HTMLElement.style documentation

意思是当您使用 content.style.display（读取或设置它的值）时，您正在执行的是编写 inline 的样式。

由于 <div class="content"> 在页面首次加载时没有内联样式，因此您的测试 if (content.style.display === "block") 的计算结果为 false。它第二次起作用是因为您的第一次点击应用了带有 content.style.display = "block".

的块内联样式

修复它的一种方法是简单地手动将内联样式添加到您的 content 元素，如下所示：

<div class="content" style="display:block;">...

以便您的代码可以在您第一次单击按钮时评估为 true。

正如其他人所说，如果你不想使用内联样式，你可以使用 classList。

Javascript 切换按钮：将操作顺序从 show/hide 更改为 hide/show

Javascript toggle button: change action sequence from show/hide to hide/show

html

javascript

css

toggle

这是您的代码：