时间戳

首页 > 解决方案 > 从手风琴中的打开元素中删除点击类

javascript - 从手风琴中的打开元素中删除点击类

问题描述

在此示例中，如何同时保持一个定义可见：

换句话说：

单击i按钮应在其自身和术语下方的定义上切换类，并从其他按钮中删除类和从其他定义activeopen中删除类。

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>

标签： javascripthtmlcss

解决方案

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

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>

推荐阅读