第一次在这里发帖。如果我犯了愚蠢的错误，很抱歉。但我遇到的问题是，每当我点击汉堡图标时，页面就会跳回顶部。我真的很想让页面停留在用户所在的位置，而菜单从右边滑动。我不知道我是否以最有效的方式来处理这个汉堡菜单。
任何建议都将是巨大的
先谢谢你
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginRight = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginRight = '0';
}header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background-color: #000;
color: #fff;
padding: 1rem;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #000;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a {
display: block;
padding: 20px 30px;
font-size: 20px;
text-decoration: none;
color: #ccc;
}
.nav a:hover {
color: #fff;
transition: 0.4s;
}
.nav .close {
position: absolute;
top: 0;
right: 0;
}
.slide a {
color: #fff;
position: absolute;
top: 10px;
right: 10px;
}
.slide a .menu {
padding-left: 0.4rem;
}
.overlay {
background-color: #000;
z-index: 5;
}<body>
<div class="overlay">
<header id="content">
<div class="logo">Industrious</div>
<nav>
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i><span class="menu">Menu</span>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<a href="#">Home</a>
<a href="#">Elements</a>
<a href="#">Generic</a>
</div>
</nav>
</header>
</div>你必须阻止默认事件的发生。有两种方法可以做到这一点。一个简单的方法是 href 到 javascript:;.
function openSlideMenu() {
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginRight = '250px';
}
function closeSlideMenu() {
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginRight = '0';
}header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background-color: #000;
color: #fff;
padding: 1rem;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #000;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a {
display: block;
padding: 20px 30px;
font-size: 20px;
text-decoration: none;
color: #ccc;
}
.nav a:hover {
color: #fff;
transition: 0.4s;
}
.nav .close {
position: absolute;
top: 0;
right: 0;
}
.slide a {
color: #fff;
position: absolute;
top: 10px;
right: 10px;
}
.slide a .menu {
padding-left: 0.4rem;
}
.overlay {
background-color: #000;
z-index: 5;
}<div class="overlay">
<header id="content">
<div class="logo">Industrious</div>
<nav>
<span class="slide">
<a href="javascript:;" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
<span class="menu">Menu</span>
</a>
</span>
<div id="menu" class="nav">
<a href="javascript:;" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<a href="#">Home</a>
<a href="#">Elements</a>
<a href="#">Generic</a>
</div>
</nav>
</header>
</div>第二个正确的方法是做 event.preventDefault(). 如果你使用的是一个不显眼的事件监听器，你可以做这样的事情。
elem.onClick = function (e) {
e.preventDefault();
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginRight = '250px';
}