如何在連結點擊時關閉可折疊引導導覽列？

點擊時關閉可折疊Bootstrap 導覽列

Bootstrap 5（測試版）

Bootstrap 5（測試版）

• 利用JavaScript在關閉的選單項目上新增事件偵聽器

Bootstrap 4

• 使用資料切換將折疊元件加入連結或利用jQuery 進行控制。

引導程式3

• 使用資料切換在連結中包含折疊組件，或使用 jQuery 隱藏連結點擊時的導覽列。

這是 Bootstrap的詳細解法3:

標記:

<ul class="navbar-nav mr-auto">
     <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#about-us">About</a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#pricing">Pricing</a>
     </li>
</ul>

jQuery:

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

jQuery:

jQuery:此方法將在之後隱藏可折疊導航欄點擊鏈接，增強用戶體驗和導航流程。

以上是如何在連結點擊時關閉可折疊引導導覽列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！