可折疊導覽列在連結點擊時自動關閉
您已經使用 Bootstrap 4 建立了一個功能性可折疊導覽列。但是,您想要它當用戶選擇連結時自動關閉。本文為 Bootstrap 3 和 Bootstrap 4 提供了全面的解決方案,以實現此所需的行為。
Bootstrap 3 的解決方案
在 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>
此解決方案利用折疊和顯示類別來控制導覽列的可見性。
Bootstrap 4 的解決方案
對於Bootstrap 4,主要有兩種方法來完成「點擊關閉」
選項1: jQuery方法
$('.navbar-nav>li>a').on('click', function() { $('.navbar-collapse').collapse('hide'); });
選項2:具有資料屬性的JavaScript 方法
<ul class="navbar-nav me-auto"> <li class="nav-item active" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"> <a class="nav-link" href="#about-us">About</a> </li> <li class="nav-item" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"> <a class="nav-link" href="#pricing">Pricing</a> </li> </ul>
Bootstrap解決方案5
Bootstrap解決方案5
Bootstrap解決方案5
const navLinks = document.querySelectorAll('.nav-item') const menuToggle = document.getElementById('navbarSupportedContent') const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false}) navLinks.forEach((l) => { if (menuToggle.classList.contains('show')) { // only fire on mobile l.addEventListener('click', () => { bsCollapse.toggle() }) } })
對於Bootstrap 5,您可以使用帶有事件監聽器的JavaScript方法或資料屬性方法。
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse">
以上是如何讓我的可折疊導覽列在 Bootstrap 中的連結點擊時自動關閉?的詳細內容。更多資訊請關注PHP中文網其他相關文章!