这是我的代码。
<details>
<summary>1</summary>
Demo 1
</details>
<details>
<summary>2</summary>
Demo 2
</details>
<details>
<summary>3</summary>
Demo 3
</details>
我想做的是——如果任何一个的细节<details>
标签已打开,我打开/查看另一个标签<details>
标签,那么前一个应该关闭/隐藏/最小化。
如何才能实现这一目标?
我知道<details>
IE 或 Edge 不支持标签。
另一种方法,稍微更短,稍微更有效,没有依赖关系 http://youmightnotneedjquery.com/,并且 HTML 中没有 onclick 属性。
// Fetch all the details element.
const details = document.querySelectorAll("details");
// Add the onclick listeners.
details.forEach((targetDetail) => {
targetDetail.addEventListener("click", () => {
// Close all the details that are not targetDetail.
details.forEach((detail) => {
if (detail !== targetDetail) {
detail.removeAttribute("open");
}
});
});
});
<details>
<summary>1</summary>Demo 1
</details>
<details>
<summary>2</summary>Demo 2
</details>
<details>
<summary>3</summary>Demo 3
</details>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)