如何防止 Bootstrap 的可折疊選單在點擊連結後保持開啟？

Bootstrap 選單折疊：解決持久面板問題

在響應式網頁設計領域，Bootstrap 的可折疊導航選單一直是中流砥柱。然而，可能會出現一個特殊的問題：雖然選單在較小的螢幕上優雅地折疊，但點擊選單連結無法將其收回。這可能會讓用戶陷入展開的選單中，阻礙無縫導航。

揭曉解決方案：利用 JavaScript 的事件處理

解決這一困境的關鍵在於事件傳播和有針對性的活動代表團。透過監聽文件主體上的點擊並檢查目標元素是否為錨標記，我們可以僅在使用者想要時以程式方式折疊選單。這可以透過以下JavaScript 程式碼優雅地實現：

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

解決潛在的子選單幹擾

使用子選單時，上述程式碼可能會遇到微妙的陷阱。如果點選子選單的切換元素，父選單可能會無意中折疊。為了防止這種意外行為，需要改進程式碼版本：

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

透過從事件邏輯中排除下拉切換元素，我們確保點擊子選單按鈕不會過早關閉主選單。

支援動態導航

這個解決方案的美妙之處在於它的動態性質。事件偵聽器綁定到整個文檔，因此即使添加或刪除菜單鏈接，折疊行為也將保持不變。這種適應性保證了靜態網頁和自適應網頁上的無縫導航。

以上是如何防止 Bootstrap 的可折疊選單在點擊連結後保持開啟？的詳細內容。更多資訊請關注PHP中文網其他相關文章！