bootstrap 5单击链接或单击页面外部时如何关闭整个菜单
[英]bootstrap 5 how to close the whole menu when click on the link or click outside on the page
问题描述
I'm using BootStrap 5 to build my page
我正在使用BootStrap 5来构建我的页面
I have a NavBar Menu with links我有一个带有链接的NavBar Menu
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" > <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </head> <nav class="navbar navbar-expand-lg navbar-light bg-transparent pt-0 pb-0"> <div class="container"> <a class="navbar-brand pt-0 pb-0 me-0" href="#home">Salimi<span>Me</span></a> <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-between" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item position-relative"> <a class="nav-link active" aria-current="page" href="#home">Home</a> </li> <li class="nav-item position-relative"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item position-relative"> <a class="nav-link" href="#skills">Skills</a> </li> <li class="nav-item position-relative"> <a class="nav-link" href="#timeline">Education</a> </li> <li class="nav-item position-relative"> <a class="nav-link" href="#portfolio">Portfolio</a> </li> <li class="nav-item position-relative"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> <a class="top-btn text-decoration-none d-inline-block" href="#">Download CV</a> </div> </div> </nav>
what i try to do is when the user click on the link i want the whole meu to close and the user get the section he want我尝试做的是当用户单击我希望关闭整个菜单的链接并且用户获得他想要的部分时
also if he click outside the menu the menu close if it's open另外，如果他在菜单外单击，则菜单打开时会关闭
How to close the whole NavBar Menu when i click on a link inside or i click outside on the page?当我单击内部链接或单击页面外部时，如何关闭整个导航栏菜单？
1 个解决方案
解决方案1
0 2022-06-09 16:56:12
<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" > <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </head> <style></style> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <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" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" > Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider" /></li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> </li> </ul> </div> </div> </nav> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
单击外部引导程序菜单以将其关闭 - click outside bootstrap menu to close it
点击外面时如何关闭菜单？ - How to close the menu when I click outside?
如何？ 单击菜单外部时关闭菜单 - how to ? close menu when you click outside of it
当您单击外部时，Bootstrap 3 关闭导航菜单 - Bootstrap 3 close nav menu when you click outside
单击链接和外部时关闭菜单汉堡包 - Make menu hamburger close when click on link and outside
单击外部菜单将其关闭 - Click outside menu to close it
单击侧边栏菜单外部和单击菜单项时关闭侧边栏菜单 - Close sidebar menu when click outside of it and when click on menu item
Angular 7：单击外部时关闭菜单 - Angular 7 : close menu when click outside
当我们在平板电脑上单击外部时，如何关闭bootstrap 3下拉菜单？ - How to close bootstrap 3 dropdown when we click outside on a tablet?
再次单击外部时如何关闭引导模态窗口？ - How to make a bootstrap modal window close when click outside again?
相关标签