如何解决如何在Web组件中创建手风琴自定义元素
我正在尝试使用javascript中的自定义元素创建手风琴。
我在HTML中编写的以下提到的HTML
var accordions = document.querySelectorAll(".accordion");
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function () {
this.classList.toggle('is-open');
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
}
}
<div class="container">
<button class="accordion">Accordian #1</button>
<div class="accordion-content">
<p> Content 1</p>
</div>
</div>
解决方法
如果您可以使用现代自定义元素,则浏览器还将知道<details>
和<summary>
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
- https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/
<style>
details[open] {
background: lightgreen;
padding-left: 1em;
}
details[open] summary {
background: green;
color: white;
margin-left: -1em;
}
</style>
<my-accordion>
<details><summary>Alpha</summary>Amazing!</details>
<details open><summary>Bravo</summary>Note the default open attribute</details>
<details><summary>Charlie</summary><h3>Cool!</h3>hold Ctrl Key</details>
<details><summary>Delta</summary><B>D...</B><hr>The end</details>
</my-accordion>
<script>
customElements.define('my-accordion',class extends HTMLElement {
connectedCallback() {
this.onclick = evt => {
[...this.children].map(detail => {
!evt.ctrlKey && detail.toggleAttribute("open",evt.target == detail);
});
}
}
});
</script>
注意:有一个toggle
事件,您可以尝试(使用useCapture=true
),但是toggleAttribute
会触发该事件!造成无休止的循环
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。