javascript - 当我单击菜单按钮(onlick)时,它会打开然后立即关闭
问题描述
当我单击使用 onlick 事件的元素时,它会按原样打开,然后立即关闭。起初我将脚本放在其他文件中,我使用了 script src 方法。然后我试图将脚本移动到正文部分的底部,什么也没有。试图在正文部分的开头移动脚本仍然没有。我什至检查了 W3Schools,他们的例子和我的一样!
这是我的 HTML 代码:
<body>
<header>
<h1>Joy Division</h1>
<nav class="nav">
<a href="" ><img src="../img/menu.png" id="menu_button" onclick="menuOpen()"></a>
<div id="navbar_active">
<a href="" ><img src="../img/back.jpg" id="menu_back" onclick="menuClose()"></a>
<li><a href="discography.html">Discography</a></li>
<li><a href="members.html">Band Members</a></li>
<li><a href="history.html">History</a></li>
<li><a href="neworder.html">New Order</a></li>
</div>
</nav>
</header>
<script>function menuOpen() {
document.getElementById("menu_button").style.display = "none";
document.getElementById("navbar_active").style.display = "block";
}
function menuClose() {
document.getElementById("navbar_active").style.display = "none";
document.getElementById("menu_button").style.display = "block";
}
</script>
</body>
我的 CSS 代码:
html {
margin: 0;
min-height: 100%;
background-image: url('../img/background1.jpg') ;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
body {
color: white;
}
header {
display: block;
position: relative;
}
header h1 {
margin: 0;
display: block;
margin-top: 30px;
font-size: 70px;
font-family: Perpetua Titling MT;
font-weight: lighter;
text-align: center;
text-transform: uppercase;
}
nav {
display: block;
position: absolute;
top: 0;
margin-top: 15px;
margin-left: 20px;
}
#menu_button{
display: block ;
height: 60px;
width: 60px;
}
nav a img:hover {
opacity: 0.8;
}
#navbar_active {
display: none;
position: absolute;
top: 0;
margin-left: -1.75em;
margin-top: -2.8em;
width: 420px;
height: 100vh;
background: inherit;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(170deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
opacity: 0.9;
}
#navbar_active img {
margin-top: 2.8em;
margin-left: 20em;
height: 50px;
width: 50px;
}
#navbar_active li {
list-style: none;
margin-top: 4em;
padding-top: 3em;
text-align: center;
}
#navbar_active li a {
text-decoration: none;
text-transform: uppercase;
font-family: Perpetua Titling MT;
font-weight: lighter;
font-size: 40px;
color: white;
}
#navbar_active li a:hover {
opacity: 0.2;
color: white;
}
解决方案
推荐阅读
- javascript - 将数据从包含插槽内容的组件传递到该插槽内容组件
- kotlin - 在 LiveData 或 MutableLiveData 中包装 MutableList
- javascript - 如何编辑/更新数组中的对象并保留所有其他嵌套数据?
- vb.net - 无法回调变量
- css-selectors - 在 Slick Carousel 中定位活动元素
- java - Tomcat 在关闭时是否会过早破坏 ServletContext?
- python-3.x - 类型提示实现两个接口的对象
- docker - phpMyAdmin - Docker容器上的错误“调用成员函数getPath on null”
- r - “独特”的错误?当 'nmax' 比唯一值的数量少 1 时,不会出现错误
- javascript - 将嵌套数组减少为格式化字符串