首頁 >web前端 >css教學 >為什麼我的 Bootstrap 3 折疊導航選單在點擊連結後仍保持開啟狀態?

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

DDD
DDD原創
2024-12-22 08:25:10608瀏覽

Why Does My Bootstrap 3 Collapsed Navigation Menu Stay Open After Clicking a Link?

Bootstrap 3 折疊導航選單在點擊時保持開啟

Bootstrap 3 的導航選單為小型裝置提供了方便的折疊功能。但是,單擊選單連結後,選單有時會保持開啟狀態。如果您希望在選擇某個項目後關閉選單,這可能會令人沮喪。

下面的程式碼是GitHub 上流行的解決方案,可以解決此問題:

$(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 3 折疊導航選單在點擊連結後仍保持開啟狀態?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn