Как обработать событие раскрытия / свертывания элемента HTML5 <details>? - PullRequest
Новая
       24

Как обработать событие раскрытия / свертывания элемента HTML5 <details>?

0 голосов
/ 19 февраля 2019

Я использую детали / сводные элементы, чтобы получить расширяемый раздел:

https://www.w3schools.com/TAGS/tag_details.asp

d3.select('details')
  .on('click',()=>{
     alert('clicked');
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<details>
  <summary>Header</summary>
  <p>Content</p>
  <p>Content</p>
</details>

Я хочу выполнить действие при переключении открытого состояния элемента details.Как я могу это сделать?

Если бы я использовал событие onclick, оно также вызывается, если пользователь нажимает на сводку или содержимое.Я хочу обрабатывать только «щелчки на стрелке переключения».

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

summary::-webkit-details-marker

summary::-webkit-details-marker - это стрелка, которую вы хотите, к сожалению, она находится в теневом DOM 1008 * и доступ к ней не является кросс-браузерным (Только хром).

Следующая демонстрация:

  • Скрывает оригинальную стрелку

  • Заменена стрелка на: <b>▶</b>

  • Анимированная с помощью CSS

  • Базовый JavaScript применяется к стрелке

Демо 

document.querySelector('summary b').onclick = function(e) {
  console.log('clicked');
};
summary::-webkit-details-marker {
  display: none
}

summary {
  height: 1rem;
  font-size: 1rem;
}

summary:focus {
  outline: none
}

summary b {
  display: inline-block;
  font-size: 0.75rem;
  margin: 0;
  padding: 5px;
  cursor: pointer;
  line-height: 1rem;
  height: 1rem;
  vertical-align: middle;
  transform: rotate(0deg);
  transition: transform 0.3s;
}

[open] b {
  transform: rotate(90deg);
  transition: transform 0.3s;
  transform-origin: 50% 45%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<details>
  <summary><b>▶</b>Header</summary>
  <p>Content</p>
  <p>Content</p>
</details>
0 голосов
/ 19 февраля 2019 

d3.select('details')
  .on('toggle',()=>{
     alert('clicked');
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<details>
  <summary>Header</summary>
  <p>Content</p>
  <p>Content</p>
</details>
...