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

Question

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

这是代码层链接

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');
}
}
});