Vanilla Javascript 如何切换最近的隐藏元素

Question

我有多个文本块，每个文本块都包含一个“阅读更多”按钮。

看到这个JSFIDDLE （更新）

 let toggleBtns = document.querySelectorAll(".btn-toggle"); let hiddenArea = document.querySelector(".hidden"); toggleBtns.forEach((btn) => { btn.addEventListener("click", (e) => { if (hiddenArea.classList.contains('hidden')) { hiddenArea.classList.remove("hidden"); } else { hiddenArea.classList.add("hidden"); } }); });

 .hidden { display: none; }

 <section class="text-blocks"> <div> <div> <p>This is some text</p> </div> <div class="hidden" style="display:none"> <p>This is some hidden text</p> </div> <button class="btn-toggle"> Read more <svg class="caret stroke-current transition-transform ease-in-out duration-200" width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 2L9.00104 9.5L16 2" stroke="currentColor" stroke-width="2" stroke-linecap="square"/> </svg> </button> </div> </section> <section class="text-blocks"> <div> <div> <p>This is some text</p> </div> <div class="hidden" style="display:none"> <p>This is some hidden text</p> </div> <button class="btn-toggle"> Read more <svg class="caret stroke-current transition-transform ease-in-out duration-200" width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 2L9.00104 9.5L16 2" stroke="currentColor" stroke-width="2" stroke-linecap="square"/> </svg> </button> </div> </section> <section class="text-blocks"> <div> <div> <p>This is some text</p> </div> <div class="hidden" style="display:none"> <p>This is some hidden text</p> </div> <button class="btn-toggle"> Read more <svg class="caret stroke-current transition-transform ease-in-out duration-200" width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 2L9.00104 9.5L16 2" stroke="currentColor" stroke-width="2" stroke-linecap="square"/> </svg> </button> </div> </section>

这不起作用。 有人可以帮我吗？

Answer 1

我会从最近的部分容器中委托

我还会给 div 一个不会消失的类名 - 在这里我添加了toggle类

最后，我使用最接近来获取父部分，以防您想移动按钮，使同级不再是 previousElementSibling

也让我们更改按钮的文本，因为我们可以

 document.getElementById("container").addEventListener("click", e => { const tgt = e.target.closest("button"); // in case you have something in the button if (tgt && tgt.classList.contains("btn-toggle")) { // did we find the element? const hidden = tgt.closest("section") .querySelector(".toggle") // the div that can be toggled .classList.toggle("hidden"); // returns true or false for hidden or not tgt.textContent = hidden ? "Read more ⮟" : "Read less ⮝"; } })

 .hidden { display: none; }

 <div id="container"> <section class="text-blocks"> <div> <div> <p>This is some text</p> </div> <div class="toggle hidden"> <p>This is some hidden text</p> </div> <button class="btn-toggle"> Read more ⮟ </button> </div> </section> <section class="text-blocks"> <div> <div> <p>This is some text</p> </div> <div class="toggle hidden"> <p>This is some hidden text</p> </div> <button class="btn-toggle"> Read more ⮟ </button> </div> </section> <section class="text-blocks"> <div> <div> <p>This is some text</p> </div> <div class="toggle hidden"> <p>This is some hidden text</p> </div> <button class="btn-toggle"> Read more ⮟ </button> </div> </section> </div>

Answer 2

如果使用事件委托，则不必处理每个元素。 此外，如果您已经使用了hidden类，则style属性没有意义。 您可以使用classList.toggle设置/删除hidden类。

在代码片段中，我将按钮移动到div.toggle 。 处理程序显示或隐藏p 。 优点是现在可以仅使用 css 操作按钮文本。

你可以只用 css 做很多事情。 这是该代码段的简化版本。

 document.addEventListener('click', handle); function handle(evt) { const origin = evt.target if (origin.closest('.btn-toggle')) { return origin.closest('.toggle').classList.toggle('hidden'); } }

 .hidden p { display: none; } .toggle.hidden button:after { content: 'Read more \\25bc'; } .toggle button:after { content: 'Read less \\25b2'; }

 <section class="text-blocks"> <div> <div> <p>This is some text</p> </div> <div class="hidden toggle"> <button class="btn-toggle"></button> <p>This is some hidden text</p> </div> </div> </section> <section class="text-blocks"> <div> <div> <p>This is some text</p> </div> <div class="hidden toggle"> <button class="btn-toggle"></button> <p>This is some hidden text</p> </div> </div> </section>

Answer 3

您需要检查传递给事件处理程序的事件对象。

toggleBtns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    const target = e.target; // that will be the button which was clicked, since the event handler was attached to it
    const div = target.parentNode // the wrapping <div>
    // using the div as context will yield the hidden area
    // »for that button«
    const hidden = div.querySelector('.hidden');

    if (hidden) { /* logic to show here */ }
  });
});