Bootstrap5 中帶有下拉菜單的葯丸只能使用一次

Question

我想在 Bootstrap5 中使用帶有下拉菜單和選項卡的葯丸。 單擊葯丸中的下拉項時，我想顯示相關選項卡。 它有效，但只有一次。 單擊下拉菜單中的一項后變為主動，單擊新項后，舊項不會變為被動。 結果是沒有項目可以點擊。

這是codeply鏈接

Answer 1

在 Bootstrap5 文檔中有一個關於這個問題的警告：

請注意，動態選項卡式界面不應包含下拉菜單，因為這會導致可用性和可訪問性問題。 從可用性的角度來看，當前顯示的選項卡的觸發元素不是立即可見的（因為它位於關閉的下拉菜單中）這一事實可能會導致混淆。 從可訪問性的角度來看，目前還沒有明智的方法將 map 構造成標准的 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');
        }
    }
});