从手风琴中的打开元素中单击删除类 [英] Removing class on click from open elements in an accordion

问题描述

在此示例中，如何同时只显示一个定义：

How do I keep only one definition visible at the same time in this example:

换句话说：

点击 i 按钮应切换自身的类和术语下面的
定义， remove 活跃来自其他
按钮的课程和来自其他定义的打开课程。

Clicking on i button should toggle class on itself and the definition below the term, and remove active class from other buttons and open class from other definitions.

document.querySelectorAll("dl").forEach(dl =>
  dl.addEventListener("click", ({ target }) => {
    if (!target.matches("button")) return
    target.classList.toggle("active")
    target.parentElement.nextElementSibling.classList.toggle("open")
  })
)

dd {
  visibility: hidden;
  height: 0
}

.open {
  visibility: visible;
  height: auto
}

.active {
  color: DeepSkyBlue
}

abbr {
  pointer-events: none
}

<dl>
  <dt>aluminum
  <button type=button><abbr title="See Definition"><i>i</i></abbr></button></dt>
  <dd>the chemical element of atomic number 13, a light silvery-grey metal.</dd>

  <dt>silver
  <button type=button><abbr title="See Definition"><i>i</i></abbr></button></dt>
  <dd>a precious shiny greyish-white metal, the chemical element of atomic number 47.</dd>

  <dt>gold
  <button type=button><abbr title="See Definition"><i>i</i></abbr></button></dt>
  <dd>a yellow precious metal, the chemical element of atomic number 79.</dd>

  <dt>platinum
  <button type=button><abbr title="See Definition"><i>i</i></abbr></button></dt>
  <dd>a precious silvery-white metal, the chemical element of atomic number 78.</dd>
</dl>

推荐答案

在打开新选项之前，您必须隐藏打开选项。你可以这样做：

You have to hide the open option before opening the new one. You could do like this:

window.onload = function() {
    document.querySelectorAll("dl").forEach(dl =>
        dl.addEventListener("click", ({ target }) => {
            if (!target.matches("button")) return
            const dl = target.closest('dl');
            // Check if there is an active button and remove active class
            if (dl.querySelector('.active') != null) {
                dl.querySelector('.active').classList.toggle('active');
            }
            // Check if there is an open dd and close it
            if (dl.querySelector('.open') != null) {
                dl.querySelector('.open').classList.toggle('open');
            }

            target.classList.toggle("active")
            target.parentElement.nextElementSibling.classList.toggle("open")
        })
    )
}

dd {
    visibility: hidden;
    height: 0
}

.open {
    visibility: visible;
    height: auto
}

.active {
    color: DeepSkyBlue
}

abbr {
    pointer-events: none
}

<p>Car List.</p>

<p id="show"></p>
<p id="show1"></p>

<dl>
    <dt>aluminum
    <button type=button><abbr title="See Definition"><i>i</i></abbr></button></dt>
    <dd>the chemical element of atomic number 13, a light silvery-grey metal.</dd>
  
    <dt>silver
    <button type=button><abbr title="See Definition"><i>i</i></abbr></button></dt>
    <dd>a precious shiny greyish-white metal, the chemical element of atomic number 47.</dd>
  
    <dt>gold
    <button type=button><abbr title="See Definition"><i>i</i></abbr></button></dt>
    <dd>a yellow precious metal, the chemical element of atomic number 79.</dd>
  
    <dt>platinum
    <button type=button><abbr title="See Definition"><i>i</i></abbr></button></dt>
    <dd>a precious silvery-white metal, the chemical element of atomic number 78.</dd>
  </dl>

这篇关于从手风琴中的打开元素中单击删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！