Javascript切換按鈕：將動作序列從顯示/隱藏更改為隱藏/顯示

我有以下腳本，我在w3schools找到了，

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

但由于我希望文本框在訪問頁面時最初可見，因此我將上述 2 項留在了contentCSS 之外。

但是現在，如前所述，我必須單擊切換按鈕兩次（僅在我第一次這樣做時）才能隱藏文本框。

如何修改上述內容，javascript以便第一次單擊隱藏而不是嘗試使其可見？

我自己嘗試了一些更改，但我只是破壞了腳本。這是我制作的第一個網站，任何幫助將不勝感激。

uj5u.com熱心網友回復：

只需使用：

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>

uj5u.com熱心網友回復：

style 只讀屬性以 CSSStyleDeclaration 的形式回傳元素的行內樣式

從HTMLElement.style檔案

這意味著當您使用content.style.display（讀取或設定其值）時，您正在執行的是inline撰寫的樣式。

由于<div >頁面首次加載時沒有行內樣式，因此您的測驗if (content.style.display === "block")評估為false. 它第二次起作用，因為您的第一次單擊應用了塊行內樣式content.style.display = "block"。

修復它的一種方法是簡單地手動將行內樣式添加到您的content元素，如下所示：

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

這樣您的代碼就可以true在您第一次單擊按鈕時進行評估。

就像其他人說的那樣，如果你不想使用行內樣式，你可以使用classList代替。

標籤：javascript html css 切换

上一篇：為什么我的日期沒有顯示值盡管值改變了？

下一篇：身體標簽溢位，不適合容器