javascript - 如何使单个页面上的多个详细信息标签具有手风琴效果？

Question

我想details在一个页面上使用多个标签。但是，有些内容可能最终会包含很多内容，因此我想限制在任何给定时间只打开一个内容。如果它已经打开，这自然意味着关闭一个。

detail是否可以使用 JavaScript以编程方式关闭标签？

Answer 1

如果我理解正确，这应该做你想做的（jsfiddle）。该details元素有一个open属性，您可以简单地删除它。我正在使用 jQuery，但在 vanilla JS 中做同样的事情应该很简单。

$(document).ready(function() {
    $('details').on('click', function() {
        $('details').removeAttr('open');
    });
});

您可能想要过滤出details触发点击事件的标签，但它似乎以这种方式工作。