twitter-bootstrap - Bootstrap5 中带有下拉菜单的药丸只能使用一次

Question

我想在 Bootstrap5 中使用带有下拉菜单和选项卡的药丸。单击药丸中的下拉项时，我想显示相关选项卡。它有效，但只有一次。单击下拉菜单中的一项后变为主动，单击新项后，旧项不会变为被动。结果是没有项目可以点击。

这是codeply链接

Answer 1

在 Bootstrap5 文档中有一个关于这个问题的警告：

请注意，动态选项卡式界面不应包含下拉菜单，因为这会导致可用性和可访问性问题。从可用性的角度来看，当前显示的选项卡的触发元素不是立即可见的（因为它位于关闭的下拉菜单中）这一事实可能会导致混淆。从可访问性的角度来看，目前还没有明智的方法将这种结构映射到标准的 WAI ARIA 模式，这意味着辅助技术的用户无法轻松理解它。

尽管有这个警告，我还是用我自己的自定义 js 解决了这个问题：

document.querySelector('.dropdown-menu').addEventListener('click', function(e){
    for(var i=0; i<this.children.length; i++){
        if(this.children[i].querySelector('a') != e.target){
            this.children[i].querySelector('a').classList.remove('active');
        }
    }
});