Question

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

换句话说：

单击i按钮应在其自身和术语下的定义，并将active类从其他按钮和其他定义的open类。

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>

Answer 1

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

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>

Answer 2

这可能是一个解决方案。您可以遍历包含要切换的类的元素，如果需要，则进行切换

document.querySelectorAll("dl").forEach(dl =>
  dl.addEventListener("click", ({ target }) => {

document.querySelectorAll(".open").forEach(function(element) {
    if(element.classList.contains("open")){  
        element.classList.toggle("open");
    }
});

document.querySelectorAll(".active").forEach(function(element) {
    if(element.classList.contains("active")){  
        element.classList.toggle("active");
    }
});

    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
}

<body>
<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>
</body>

Answer 3

是同一回事，但是您不必每次都检查状况。

您可以只使用element.classList="";来删除元素中的所有Give类。

不，您没有任何元素的“活动”和“开放”类，您需要使用.classList.add("open")而不是.classList.toggle("open")

检查：

document.querySelectorAll("dl").forEach(dl =>
  dl.addEventListener("click", ({ target }) => {

document.querySelectorAll("dd").forEach(function(element) {
    element.classList="";
});

document.querySelectorAll(".active").forEach(function(element) {
    element.classList="";
});

    if (!target.matches("button")) return
    target.classList.add("active")
    target.parentElement.nextElementSibling.classList.add("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>

Answer 4

这是一个更简洁的解决方案，仅使用open类来完成您需要的工作以及一些CSS和ES6功能。

想法是将open全部删除，然后仅切换到单击的那个。另外，整个删除操作都通过ES6方法链接在一起。

还要注意.open+dd CSS选择器，因为您有同级而不是容器类（使用这种方法会更容易）。

document.querySelectorAll("dl").forEach(dl =>
  dl.addEventListener("click", ({ target }) => {
    if (!target.matches("button")) return
    if (!target.parentElement.classList.contains("open"))
      [...target.parentElement.parentElement.children]
        .filter(({ tagName }) => tagName.toLowerCase() == "dt")
        .forEach(element => element.classList.remove("open"))
    target.parentElement.classList.toggle("open")
  })
)

dd {
  visibility: hidden;
  height: 0
}

.open + dd {
  visibility: visible;
  height: auto
}

.open button {
  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>

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

4 个答案: