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>