Javascript使用按鈕關閉切換

Question

我正在嘗試僅使用 javascript、html 和 css 來顯示和隱藏內容。 我已經能夠獲得按鈕來顯示和隱藏頁面上的信息，但無法獲得關閉按鈕來隱藏信息。

 "use strict"; // /*Show Nutritional information results*/ const buttons = document.querySelectorAll(".contentButton"); for (const b of buttons) { b.addEventListener('click', ev => { ev.target.classList.toggle("on"); }) }

 .contentButton { background-color: #008CBA; color: white; text-align: center; text-decoration: none; font-size: 20px; width: 200px; height: 30px; border-radius: 7px; } .contentButton.on+div { display: block; } .content { display: none; position: relative; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; width: 50%; height: 100px; background-color: #000000; width: 50%; margin: 10% auto; color: blue; }

 <h2>Item List</h2> <div class="Item1"> <button class="contentButton">toggle</button> <div class="content">loooaads of stuff goes here</div> <button class="close">Close</button> </div> <div class="Item2"> <button class="contentButton">toggle</button> <div class="content">stuff goes here</div> <button class="close">Close</button> </div> <div class="Item3"> <button class="contentButton">toggle</button> <div class="content">mooooreeee stuff goes here</div> <button class="close">Close</button> </div> <div class="Item4"> <button class="contentButton">toggle</button> <div class="content">stuff goes here</div> <button class="close">Close</button> </div> <div class="Item5"> <button class="contentButton">toggle</button> <div class="content">stuff goes here</div> <button class="close">Close</button> </div> <div class="Item1"> <button class="contentButton">toggle</button> <div class="content">stuff goes here</div> <button class="close">Close</button> </div>

有人可以幫忙，以便關閉按鈕在打開時隱藏內容。

Answer 1

您可以使用：

const buttons = document.querySelectorAll(".contentButton");
const closebtns = document.querySelectorAll(".close");
  for (const b of buttons) {
    b.addEventListener('click', ev => {
      ev.target.classList.toggle("on");
    })
  }  
  for (const c of closebtns) {
    c.addEventListener('click', ev => {
      ev.target.closest("div").querySelector(".contentButton").classList.toggle("on");
    })
  } 

解釋：

• document.querySelectorAll(".close")獲取所有關閉按鈕並將單擊事件偵聽器添加到所有這些按鈕。
• ev.target.closest("div")獲取與當前點擊的關閉按鈕最接近的div。
• closest("div").querySelector(".contentButton") - 在父 div 中找到contentButton並在該元素on切換類。

Answer 2

我會將on類向上移動到相對於內容父級。

div[class^="Item"].on div.content,
div[class^="Item"].on button.close {
  display: block;
}

div.content,
button.close {
  display: none;
}

然后你需要做的就是獲取目標按鈕的父級並切換類。

如果可以，我會為所有可以在 CSS 中更容易識別的項目添加一個額外的類。

div.expandable-content.on div.content {
  display: block;
}

<div class="expandable-content Item1">
  <button class="contentButton">toggle</button>
  <div class="content">loooaads of stuff goes here</div>
  <button class="close">Close</button>
</div>
<!-- ...etc -->

---

例子

 const queryAll = (selector) => Array.from(document.querySelectorAll(selector)) const showContent = (button, visible) => { button.parentElement.classList.toggle('on', visible) } queryAll(".contentButton").forEach(button => { button.addEventListener('click', e => { showContent(e.target, true) }) }) queryAll(".close").forEach(closeBtn => { closeBtn.addEventListener('click', e => { showContent(e.target, false) }) })

 .contentButton { background-color: #008CBA; color: white; text-align: center; text-decoration: none; font-size: 20px; width: 200px; height: 30px; border-radius: 7px; } div[class^="Item"].on div.content { display: block; } div[class^="Item"].on button.close { display: block; } .close { display: none; } .content { display: none; position: relative; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; width: 50%; height: 100px; background-color: #000000; width: 50%; margin: 10% auto; color: blue; }

 <h2>Item List</h2> <div class="Item1"> <button class="contentButton">toggle</button> <div class="content">loooaads of stuff goes here</div> <button class="close">Close</button> </div> <div class="Item2"> <button class="contentButton">toggle</button> <div class="content">stuff goes here</div> <button class="close">Close</button> </div> <div class="Item3"> <button class="contentButton">toggle</button> <div class="content">mooooreeee stuff goes here</div> <button class="close">Close</button> </div> <div class="Item4"> <button class="contentButton">toggle</button> <div class="content">stuff goes here</div> <button class="close">Close</button> </div> <div class="Item5"> <button class="contentButton">toggle</button> <div class="content">stuff goes here</div> <button class="close">Close</button> </div> <div class="Item1"> <button class="contentButton">toggle</button> <div class="content">stuff goes here</div> <button class="close">Close</button> </div>

---

嵌入關閉按鈕后，您需要先獲取按鈕的內容（父），然后才能獲取包裝 div（祖父）。

 const queryAll = (selector) => Array.from(document.querySelectorAll(selector)) const showContent = (button, visible) => { button.parentElement.classList.toggle('on', visible) } queryAll(".contentButton").forEach(button => { button.addEventListener('click', e => { showContent(e.target, true) }) }) queryAll(".close").forEach(closeBtn => { closeBtn.addEventListener('click', e => { showContent(e.target.parentElement, false) }) })

 .contentButton { background-color: #008CBA; color: white; text-align: center; text-decoration: none; font-size: 20px; width: 200px; height: 30px; border-radius: 7px; } div[class^="Item"].on div.content { display: block; } div[class^="Item"].on button.close { display: block; } .close { display: none; } .content { display: none; position: relative; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; width: 50%; height: 100px; background-color: #000000; width: 50%; margin: 10% auto; color: blue; }

 <h2>Item List</h2> <div class="Item1"> <button class="contentButton">toggle</button> <div class="content"> loooaads of stuff goes here <button class="close">Close</button> </div> </div> <div class="Item2"> <button class="contentButton">toggle</button> <div class="content"> stuff goes here <button class="close">Close</button> </div> </div> <div class="Item3"> <button class="contentButton">toggle</button> <div class="content"> mooooreeee stuff goes here <button class="close">Close</button> </div> </div> <div class="Item4"> <button class="contentButton">toggle</button> <div class="content"> stuff goes here <button class="close">Close</button> </div> </div> <div class="Item5"> <button class="contentButton">toggle</button> <div class="content"> stuff goes here <button class="close">Close</button> </div> </div> <div class="Item1"> <button class="contentButton">toggle</button> <div class="content"> stuff goes here <button class="close">Close</button> </div> </div>