单击引导程序关闭画布外的导航栏5

Question

这是关于使用Bootstrap 5创建的项目。问题是，通过单击锚链接，画布外的菜单保持打开状态。

单击锚链接后如何关闭画布外菜单

<nav class="navbar  fixed-top py-5 ">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="photo.jpeg" alt="Image"
class=" image img-fluid rounded-circle position-absolute top-100 start-50 translate-middle ">
</a>
<div style="position: fixed; width: 100%; z-index: 1;">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Index</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page"  href="#Home" >Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service-section">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work-section">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-section">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#moreinfo-section">More Info</a>
</li>
</ul>
</div>
</div>
</div>
</nav>

Answer 1

这里有一个可能的解决方案。

const navLinks = document.querySelectorAll('.nav-item');
const menuToggle = document.querySelector('#offcanvasNavbar');
navLinks.forEach((elem) => {
elem.addEventListener('click', () => {
$("button.navbar-toggler").click();
});
});

<script src="https://code.jquery.com/jquery-1.6.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"></link>
<nav class="navbar  fixed-top py-5 ">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="photo.jpeg" alt="Image"
class=" image img-fluid rounded-circle position-absolute top-100 start-50 translate-middle ">
</a>
<div style="position: fixed; width: 100%; z-index: 1;">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Index</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page"  href="#Home" onclick="close_offcanvas()">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service-section">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work-section">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-section">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#moreinfo-section">More Info</a>
</li>
</ul>
</div>
</div>
</div>
</nav>

除了顶部的3行外，html保持不变(并在底部删除了一个额外的</div>(。

Answer 2

没有编辑HTML，只添加了jquery的3行。

$("#offcanvasNavbar a").click(function(){
$('.offcanvas').offcanvas('hide');
});

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar  fixed-top py-5 ">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="photo.jpeg" alt="Image"
class=" image img-fluid rounded-circle position-absolute top-100 start-50 translate-middle ">
</a>
<div style="position: fixed; width: 100%; z-index: 1;">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Index</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page"  href="#Home" onclick="close_offcanvas()">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service-section">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work-section">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-section">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#moreinfo-section">More Info</a>
</li>
</ul>
</div>
</div>
</div>
</nav>