部分忽略動畫切換

Question

我在互聯網上做了一些研究，並用它來創建一個帶有動畫的部分。 如果單擊 3 個部分標題中的一個，標題下會出現一個 sectionText。 我也為此做了一個切換，但它只有在你使用顯示時才有效。 我真的很絕望該怎么做，因為它不適用於動畫，但可以顯示。 我做錯了什么？

這是我制作的代碼：

 var section = document.getElementsByClassName("section"); var i; for (i = 0; i < section.length; i++) { section[i].addEventListener("click", function() { var sectionText = this.nextElementSibling; if (sectionText.style.left = "-100%") { sectionText.style.left = "0%"; sectionText.style.opacity = "1"; } else { sectionText.style.left = "-100%"; sectionText.style.opacity = "0"; } }); }

 * { margin: 0; padding: 0; } .section { background: #000; color: #fff; cursor: pointer; padding: 15px; width: 100%; border: none; text-align: left; font-size: 15px; } .sectionText { padding: 10px; overflow: hidden; position: relative; left: -100%; transition: 0.2s ease-out; opacity: 0; background: #f2f2f2; }

 <button class="section">Header 1</button> <div class="sectionText"> <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text </p> </div> <button class="section">Header 2</button> <div class="sectionText"> <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text</p> </div> <button class="section">Header 3</button> <div class="sectionText"> <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text </p> </div>

Answer 1

在if使用===而不是=

---

也切換這個：

if (sectionText.style.left === "-100%") {
      sectionText.style.left = "0%";
      sectionText.style.opacity = "1";
    } else {
      sectionText.style.left = "-100%";
      sectionText.style.opacity = "0";
}

有了這個：

if (sectionText.style.left === "0%") {
      sectionText.style.left = "-100%";
      sectionText.style.opacity = "0";
    } else {
      sectionText.style.left = "0%";
      sectionText.style.opacity = "1";
    }

所以你可以通過第一次點擊來切換它。

---

這是代碼：

 var section = document.getElementsByClassName("section"); var i; for (i = 0; i < section.length; i++) { section[i].addEventListener("click", function() { var sectionText = this.nextElementSibling; if (sectionText.style.left === "0%") { sectionText.style.left = "-100%"; sectionText.style.opacity = "0"; } else { sectionText.style.left = "0%"; sectionText.style.opacity = "1"; } }); }

 * { margin: 0; padding: 0; } .section { background: #000; color: #fff; cursor: pointer; padding: 15px; width: 100%; border: none; text-align: left; font-size: 15px; } .sectionText { padding: 10px; overflow: hidden; position: relative; left: -100%; transition: 0.2s ease-out; opacity: 0; background: #f2f2f2; }

 <button class="section">Header 1</button> <div class="sectionText"> <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text </p> </div> <button class="section">Header 2</button> <div class="sectionText"> <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text</p> </div> <button class="section">Header 3</button> <div class="sectionText"> <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text </p> </div>