首頁 > web前端 > css教學 > 如何在連結點擊時關閉可折疊引導導覽列?

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

Barbara Streisand
發布: 2024-12-07 16:20:18
原創
690 人瀏覽過

How to Close a Collapsible Bootstrap Navbar on Link Click?

點擊時關閉可折疊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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板