Twitter bootstrap Bootstrap5中含有滴落物的药片只起作用一次

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

---

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

document.querySelector（'.dropdown menu'）。addEventListener（'click'，函数（e）{
对于（var i=0；我认为不可能将两个组件组合在一起..下拉列表和Tabs/pillsNo@Zim。这是可能的。下面是Bootstrap 3@ziyasan的示例..这是一个旧版本。Bootstrap 5非常不同