[英]close dropdown menu on click outside
我遇到了这个问题,我的下拉菜单在外面点击时没有关闭,看来这个问题的主要原因是 fontawesome 用户图标本身,我试图找到 alert() 的问题,但 alert() 被激活在网站的每个像素上,即使我点击了用户图标本身。
function dropdown() {
var x = document.getElementsByClassName("submenu");
x.classList.toggle("show");
}
var submenu = document.getElementsByClassName("submenu");
window.onclick = function(event) {
if (!event.target.matches('#superior')) {
if (submenu.classList.contains('show')) {
submenu.classList.remove('show');
}
}
}
* {
padding: 0;
margin: 0;
box-sizing:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
header {
background-color: #fff;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.navbar {
min-height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
z-index: 2;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
gap: 50px;
}
.nav-branding {
font-size: 2em;
margin: 0;
}
.nav-item {
line-height: 25px;
margin-top: 25px;
}
.nav-link {
transition: 0.5s ease;
font-size: 1.2rem;
}
.submenu{
display: none;
position: absolute;
z-index: 2;
line-height: 50px;
font-size: 1.2rem;
font-weight: 600;
width: 295px;
transform: translateX(-79%);
text-align: center;
min-height: 100px;
background-color: black;
}
.sub-link{
color: white;
}
.show{
display: block;
}
border-box;
font-family: 'Raleway', sans-serif;
}
header {
background-color: #fff;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.navbar {
min-height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
z-index: 2;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
gap: 50px;
}
.nav-branding {
font-size: 2em;
margin: 0;
}
.nav-item {
line-height: 25px;
margin-top: 25px;
}
.nav-link {
transition: 0.5s ease;
font-size: 1.2rem;
}
.submenu{
display: none;
position: absolute;
z-index: 2;
line-height: 50px;
font-size: 1.2rem;
font-weight: 600;
width: 295px;
transform: translateX(-79%);
text-align: center;
min-height: 100px;
background-color: black;
}
.sub-link{
color: white;
}
.show{
display: block;
}
<script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>
<header>
<nav class="navbar">
<a href="#" class="logo">logo</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link">link</a>
</li>
<li class="nav-item user-menu">
<a onclick="dropdown()" id="superior" href="#" class="nav-link"><i class="fa-solid fa-user"></i></a>
<ul id="submenu" class="submenu">
<li>
<a class="sub-link" href="#">link</a>
</li>
<li>
<a class="sub-link" href="#">link</a>
</li>
<li>
<a class="sub-link" href="#">link</a>
</li>
<li>
<a class="sub-link" href="#">link</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
function dropdown() {
var x = document.getElementsByClassName("submenu");
x.classList.toggle("show");
}
var submenu = document.getElementsByClassName("submenu");
window.onclick = function(event) {
if (!event.target.matches('#superior')) {
if (submenu.classList.contains('show')) {
submenu.classList.remove('show');
}
}
}
* {
padding: 0;
margin: 0;
box-sizing:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
header {
background-color: #fff;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.navbar {
min-height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
z-index: 2;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
gap: 50px;
}
.nav-branding {
font-size: 2em;
margin: 0;
}
.nav-item {
line-height: 25px;
margin-top: 25px;
}
.nav-link {
transition: 0.5s ease;
font-size: 1.2rem;
}
.submenu{
display: none;
position: absolute;
z-index: 2;
line-height: 50px;
font-size: 1.2rem;
font-weight: 600;
width: 295px;
transform: translateX(-79%);
text-align: center;
min-height: 100px;
background-color: black;
}
.sub-link{
color: white;
}
.show{
display: block;
}
border-box;
font-family: 'Raleway', sans-serif;
}
header {
background-color: #fff;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.navbar {
min-height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
z-index: 2;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
gap: 50px;
}
.nav-branding {
font-size: 2em;
margin: 0;
}
.nav-item {
line-height: 25px;
margin-top: 25px;
}
.nav-link {
transition: 0.5s ease;
font-size: 1.2rem;
}
.submenu{
display: none;
position: absolute;
z-index: 2;
line-height: 50px;
font-size: 1.2rem;
font-weight: 600;
width: 295px;
transform: translateX(-79%);
text-align: center;
min-height: 100px;
background-color: black;
}
.sub-link{
color: white;
}
.show{
display: block;
}
<script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>
<header>
<nav class="navbar">
<a href="#" class="logo">logo</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link">link</a>
</li>
<li class="nav-item user-menu">
<a onclick="dropdown()" id="superior" href="#" class="nav-link"><i class="fa-solid fa-user"></i></a>
<ul id="submenu" class="submenu">
<li>
<a class="sub-link" href="#">link</a>
</li>
<li>
<a class="sub-link" href="#">link</a>
</li>
<li>
<a class="sub-link" href="#">link</a>
</li>
<li>
<a class="sub-link" href="#">link</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
检测点击并检查被点击元素的最近父级。 是的,现在不支持 jQuery。
document.addEventListener('mousedown', function(event) { var elem = event.target; var closest = elem.closest(".jmp-container"); if (closest) { // console.log("click inside") } else { // hide menu document.querySelector(".jmp-container")?.remove(); } })
body { height: 100vh; }.container, .jmp-container { display: inline-block; padding: 20px; border: 1px solid gray; }.active { border: 2px solid red; }
<div class="container"> I AM REST OF BODY <div class="jmp-container"> I AM NAVBAR <button>hello</button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.