為什麼我的 Bootstrap 3 折疊導航在點擊選單連結後仍保持打開狀態？

點擊選單連結後，Bootstrap 3 的折疊導航保持開啟狀態

在典型的Bootstrap 3 導航設定中，點擊折疊🎜>

在典型的Bootstrap 3 導航設定中，點擊折疊選單中的選單連結應導致選單自動關閉。然而，一些用戶遇到了選擇選單連結後選單保持開啟的問題。

理解問題

出現此問題是因為 Bootstrap 崩潰的預設行為外掛程式的作用是在點擊觸發按鈕時切換元素的可見性。這意味著點擊折疊選單本身（包括選單連結）不會觸發折疊操作。

解決方案

為了解決此問題，需要使用 JavaScript 事件偵聽器可以新增到文件中。此偵聽器會偵測使用者何時在折疊的導覽中按一下並自動隱藏它。以下是範例程式碼：

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});

解釋

• $(document).on 將事件監聽器綁定到文檔，以便按一下與選取器匹配的元素.navbar-collapse.in。這確保了僅當導航折疊時才觸發該事件。
• if 條件檢查點擊的元素（e.target）是否為錨點 ；不是下拉切換的標記（“.dropdown-toggle”）。排除下拉開關，以防止在存取其子選單時折疊選單。
• 如果滿足條件，則會在單擊的元素上呼叫折疊（'hide'）方法，這會折疊導航。

此解決方案可確保當使用者點擊選單連結時折疊選單自動關閉，從而提供無縫且使用者友好的導航體驗。

以上是為什麼我的 Bootstrap 3 折疊導航在點擊選單連結後仍保持打開狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！