Как сохранить только одно определение видимым одновременно в этом примере:

Другими словами:

Нажатие на кнопку 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>
javascript html css
2
Tzar 21 Авг 2018 в 06:48

4 ответа

Лучший ответ

Вы должны скрыть опцию открытия, прежде чем открывать новую. Вы могли бы сделать так:

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>
3
f-CJ 21 Авг 2018 в 04:09

Это то же самое, но вы не обязаны проверять состояние каждый раз.

Вы можете просто использовать element.classList="";, чтобы удалить все данные класса из элемента.

Нет, у вас нет «активного» и «открытого» класса для какого-либо элемента, вам нужно использовать .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>
1
saAction 21 Авг 2018 в 04:28

Вот более краткое решение, которое использует только класс open для того, что вам нужно, и некоторые функции CSS и ES6.

Идея состоит в том, чтобы удалить open для всех, а затем переключаться только на тот, на который нажали. Также вся вещь для удаления связана с помощью методов ES6.

Также обратите внимание на селектор CSS .open+dd, так как у вас есть братья и сестры, а не класс контейнера (это было бы проще при таком подходе).

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>
1
Tzar 21 Авг 2018 в 06:32

Это может быть решением. Вы можете перебрать элементы, которые содержат класс, который вы хотите переключить, если они есть, то переключите его

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>
1
95faf8e76605e973 21 Авг 2018 в 04:19
51941288

Похожие вопросы

29 Как удалить свойство из объекта JavaScript?
29 Удалить пустые элементы из массива в Javascript
21 Как добавить класс к данному элементу?
17 Удалить элемент по id
29 Как я могу удалить конкретный элемент из массива?
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

2 Объединить два многомерных массива в vuejs или javascript
3 Манипуляция экспресс-ответом для отправки строки клиенту
4 Как обновить объект данными из другого объекта, вложенного в массив?
2 Как контролировать интервал времени между запуском события колесика мыши
2 Получите текущий год, а также список лет с 1901 по текущий год
3 Как убрать оповещение через 5 секунд в React JS?
3 Javascript undefined
3 Как преобразовать массив массивов в массив объектов, выбрав ключ из другого массива?
2 Объединить похожие объекты по ключу в массиве
3 Вставить строку, разделенную запятыми, в новое свойство объекта
Все вопросы по теме javascript >

javascript

Для вопросов, касающихся программирования в ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (исключая ActionScript). Этот тег редко используется отдельно, но чаще всего ассоциируется с тегами [node.js], [jquery], [json] и [html].

Подробнее про javascript...