[英]Bootstrap 4 navbar - collapse on nav-link click in vanilla JS
我試圖讓 Bootstrap 4 導航欄只使用 vanilla js 而不是任何 jQuery。 到目前為止,我已經能夠讓切換器觸發導航在移動設備上折疊和關閉。 我現在想弄清楚的是如何在單擊“導航鏈接”時使導航欄崩潰
這是用於導航的 HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Browse Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#visit">Contact</a>
</li>
</ul>
</div>
</div>
和我的 JS 崩潰
(function () {
"use strict";
document.querySelectorAll("button.navbar-toggler")[0].addEventListener("click", function (event) {
var target = this.getAttribute("data-target");
var subbar = document.querySelectorAll(target)[0];
subbar.className = (subbar.className + " show").replace(/ show show/, "");
});
})();
但是,當用戶單擊<a class="nav-link" href="#"></a>
時,我該如何做到這一點,它也會折疊導航欄?
謝謝!
由於您使用的是自定義代碼,因此不必在 html 上設置目標 ( data-target="#navbarResponsive"
)。 所以我們可以重寫click
處理程序來處理兩個元素,切換器和鏈接。 要切換 class 只需使用classList
上的方法toggle
。
document.addEventListener("click", function(event) { if (event.target.classList.contains("navbar-toggler-icon")) { document.getElementById("navbarResponsive").classList.toggle("show"); } else if (event.target.classList.contains("nav-link")) { document.getElementById("navbarResponsive").classList.remove("show"); } });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="#about">About Us</a></li> <li class="nav-item"><a class="nav-link" href="#">Browse Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="#visit">Contact</a> </li> </ul> </div> </div> </nav>
您的問題的一個可能解決方案是找到所有.nav-link
並添加一個點擊偵聽器以從 class 列表中刪除show
class 。
此外,您可以使用Element.classList.toggle()
簡化代碼,例如:
(function() { let subbar = document.getElementById("navbarResponsive"); document.querySelectorAll("button.navbar-toggler")[0].addEventListener("click", function(event) { subbar.classList.toggle("show"); }); for (let navItem of document.querySelectorAll("a.nav-link")) { navItem.addEventListener("click", function(event) { subbar.classList.remove("show"); }); } })();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#about">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Browse Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="#visit">Contact</a> </li> </ul> </div> </div> </nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.