我想不通，因为它不太擅长javascript。当我点击汉堡包菜单中的服务时，我希望下拉菜单打开，但每当我点击服务时，它都会迅速打开和关闭。无论是jQuery还是香草脚本都无关紧要。第二个问题是汉堡菜单何时打开。我想要"；lorem"；去下拉菜单下而不是停留在下拉菜单下。提前谢谢。祝你今天过得愉快。
$(function () {
$(".hamburger-menu").on("click", function () {
if ($(".nav-list").hasClass("active")) {
$(".nav-list").removeClass("active");
} else {
$(".nav-list").addClass("active");
}
})
});
$(function () {
$(".dropdown-menu").on("click", function () {
if ($(".mini-menu").hasClass("active2")) {
$(".mini-menu").removeClass("active2");
} else {
$(".mini-menu").addClass("active2");
}
})
});* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
html {
font-family: 'Playfair Display', serif;
font-weight: 400;
}
:root {
--bg-color: #302b63;
--hover-color: #0f0c29;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
#top-bar {
position: fixed;
width: 100%;
height: 80px;
top: 0px;
background: var(--bg-color);
}
.container {
max-width: 1300px;
height: 100%;
margin: 0 auto;
}
.flex {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
#contain {
position: absolute;
top: 100%;
width: 100%;
justify-content: flex-end;
}
.nav-list {
background: var(--bg-color);
width: 100%;
padding: 1rem;
display: none;
}
.nav-list.active {
display: block;
}
.item {
padding-bottom: 1rem;
display: flex;
flex-direction: column;
}
.mini-menu{
margin-top: 1rem;
display: none;
}
.mini-menu.active2{
display: inline-block;
}
.item i {
position: absolute;
margin-left: 4.2rem;
}
.item a {
display: inline-block;
width: 100%;
}
.item:hover {
background:
}
.item a:hover {
color: #D4AF37;
}
.hamburger-menu {
border: 1px solid white;
padding: 1rem 0.4rem;
display: flex;
cursor: pointer;
}
.bars {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
background: white;
}
.bars::before,
.bars::after {
position: absolute;
content: '';
width: 20px;
height: 2px;
background: white;
}
.lorem {
margin-top: 6rem;
}
.bars::before {
transform: translateY(-7px);
}
.bars::after {
transform: translateY(7px);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="master.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header id="top-bar">
<div class="container flex">
<h1 class="logo">Logo</h1>
<div class="hamburger-menu">
<span class="bars"></span></div>
<nav id="contain">
<ul class="nav-list">
<li class="item">
<a href="">Home</a>
</li>
<li class="item dropdown-menu">
<a href="">Services</a>
<ul class="mini-menu">
<li class="mini-item"><a href="">Front-End Developement</a></li>
<li class="mini-item"><a href="">Back-End Developement</a></li>
<li class="mini-item"><a href="">Full-Stack Developement</a></li>
<li class="mini-item"><a href="">WordPress Developement</a></li>
</ul>
</li>
<li class="item">
<a href="">Portfolio</a>
</li>
<li class="item">
<a href="">Articles</a>
</li>
<li class="item">
<a href="">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<script src="api.js"></script>
</body>
</html>这很正常，需要这样！快速打开和关闭背后的原因是，你正在单击一个链接，浏览器试图跟随它，由于该链接没有href属性，它最终会重新加载页面。
因此，这里的一个快速而简单的解决方案是防止这种情况发生，幸运的是，JavaScript允许我们防止几乎所有事件，并且click事件可以通过调用传递给侦听器的event对象的preventDefault方法来防止(您没有传递(。
请参阅下面的更新代码。
$(function () {
$(".hamburger-menu").on("click", function () {
if ($(".nav-list").hasClass("active")) {
$(".nav-list").removeClass("active");
} else {
$(".nav-list").addClass("active");
}
})
});
$(function () {
$(".dropdown-menu").on("click", function (e) {
// "e" is the click event object passed to your listener
// simply, add this line to prevent default anchor click behavior
e.preventDefault();
if ($(".mini-menu").hasClass("active2")) {
$(".mini-menu").removeClass("active2");
} else {
$(".mini-menu").addClass("active2");
}
})
});* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
html {
font-family: 'Playfair Display', serif;
font-weight: 400;
}
:root {
--bg-color: #302b63;
--hover-color: #0f0c29;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
#top-bar {
position: fixed;
width: 100%;
height: 80px;
top: 0px;
background: var(--bg-color);
}
.container {
max-width: 1300px;
height: 100%;
margin: 0 auto;
}
.flex {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
#contain {
position: absolute;
top: 100%;
width: 100%;
justify-content: flex-end;
}
.nav-list {
background: var(--bg-color);
width: 100%;
padding: 1rem;
display: none;
}
.nav-list.active {
display: block;
}
.item {
padding-bottom: 1rem;
display: flex;
flex-direction: column;
}
.mini-menu{
margin-top: 1rem;
display: none;
}
.mini-menu.active2{
display: inline-block;
}
.item i {
position: absolute;
margin-left: 4.2rem;
}
.item a {
display: inline-block;
width: 100%;
}
.item:hover {
background:
}
.item a:hover {
color: #D4AF37;
}
.hamburger-menu {
border: 1px solid white;
padding: 1rem 0.4rem;
display: flex;
cursor: pointer;
}
.bars {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
background: white;
}
.bars::before,
.bars::after {
position: absolute;
content: '';
width: 20px;
height: 2px;
background: white;
}
.lorem {
margin-top: 6rem;
}
.bars::before {
transform: translateY(-7px);
}
.bars::after {
transform: translateY(7px);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="master.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header id="top-bar">
<div class="container flex">
<h1 class="logo">Logo</h1>
<div class="hamburger-menu">
<span class="bars"></span></div>
<nav id="contain">
<ul class="nav-list">
<li class="item">
<a href="">Home</a>
</li>
<li class="item dropdown-menu">
<a href="">Services</a>
<ul class="mini-menu">
<li class="mini-item"><a href="">Front-End Developement</a></li>
<li class="mini-item"><a href="">Back-End Developement</a></li>
<li class="mini-item"><a href="">Full-Stack Developement</a></li>
<li class="mini-item"><a href="">WordPress Developement</a></li>
</ul>
</li>
<li class="item">
<a href="">Portfolio</a>
</li>
<li class="item">
<a href="">Articles</a>
</li>
<li class="item">
<a href="">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<script src="api.js"></script>
</body>
</html>