在我的代码中，导航栏在点击菜单按钮时展开，并显示所有项目，如主页、博客等，但整个导航栏不会在点击同一菜单按钮时向后折叠。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>navbar</title>
<style type="text/css" media="all">
/*
Don't use overflow: hidden; inside the body tag or even * tag as it can cause problems. Use only in container and branding tag.
*/
body {
padding: 0px;
margin: 0;
box-sizing: border-box;
}
nav {
background: #333;
color: white;
padding: 5px;
border-bottom: 1px solid black;
overflow: hidden;
}
#container {
padding: 5px;
overflow: hidden;
}
#container #Branding a {
float: left;
text-decoration: none;
color: white;
font-size: 27px;
margin-top: 3px;
}
#container button {
float: right;
padding: 7px;
background: white;
margin-top: 10px;
width: 30%;
color: black;
border: none;
cursor: pointer;
}
#list li a {
text-decoration: none;
cursor: pointer;
color: white;
padding: 5px;
margin: 2px;
display: block;
}
#list li {
list-style: none;
}
#list {
display: none;
}
.hide {
display: none;
}
header {
background: teal;
padding: 30px;
font-family: Monospace;
font-size: 22px;
color: white;
text-align: center;
min-height: 30vh;
}
header #Heading h1 {
margin-top: 30px;
}
.content {
color: #333;
margin-top: 10px;
padding: 0px 5px;
font-family: Monospace;
}
.content p {
padding: 20px;
margin: 5px;
}
footer {
background: #333;
color: white;
text-align: center;
width: 100%;
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<nav>
<div id="container">
<div id="Branding">
<a href="#">Navbar</a>
<button id="toggle" >Menu</button>
</div>
</div>
<div id="list">
<li><a href="#">Home</a></li>
<li><a href="#footer">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</div>
</nav>
<header>
<div id="Heading">
<h1>Welcome</h1>
<p>
A dummy website
</p>
</div>
</header>
<div class="content">
<br />
<center><h1>Hello There,</h1>
<p>
This is a dummy website created for mobile devices. It is currently not optimised for computers and may look awkward on big screens.
</p>
<p>
I will redesign it in future and at that point it will be optimised for big screen devices like desktops and tablets too.
</p>
<p>
Rest, This webpage doesn't have too much javascript embedded and no backend too. It is just a static webpage. I tried to make it beautiful but I am not a UI designer.
</p>
</center>
</div>
<footer id="footer">
copyright 2020 © Dummy Website
</footer>
<script type="text/javascript" charset="utf-8">
alert('This website is not optimised for desktop devices. Will show correctly only on mobile devices. Also Navbar Doesnt toggle backs up, I will fix that soon.')
// adding event listener document.getElementById('toggle').addEventListener('click',() => {
if(document.getElementById('list').style.display = 'none'){
expand()
}else if(document.getElementById('list').style.display != 'none'){
collapse()
}
})
function expand() {
document.getElementById('list').style.display = 'block';
}
function collapse() {
document.getElementById('list').style.display = 'none';
}
</script>
</body>
</html>
在javascript部分中，我使用事件侦听器使按钮工作。你能帮我让它再次倒塌吗？
// adding event listener
document.getElementById('toggle').addEventListener('click',() => {
if(document.getElementById('list').style.display = 'none'){
expand()
}else if(document.getElementById('list').style.display != 'none'){
collapse()
}
})
function expand() {
document.getElementById('list').style.display = 'block';
}
function collapse() {
document.getElementById('list').style.display = 'none';
}
</script
>
您编写的代码是正确的，只是存在一个愚蠢的错误，而不是
if(document.getElementById('list'(.style.display='none'
应该是
if(document.getElementById('list'(.style.display=='none'
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>navbar</title>
<style type="text/css" media="all">
/*
Don't use overflow: hidden; inside the body tag or even * tag as it can cause problems. Use only in container and branding tag.
*/
body {
padding: 0px;
margin: 0;
box-sizing: border-box;
}
nav {
background: #333;
color: white;
padding: 5px;
border-bottom: 1px solid black;
overflow: hidden;
}
#container {
padding: 5px;
overflow: hidden;
}
#container #Branding a {
float: left;
text-decoration: none;
color: white;
font-size: 27px;
margin-top: 3px;
}
#container button {
float: right;
padding: 7px;
background: white;
margin-top: 10px;
width: 30%;
color: black;
border: none;
cursor: pointer;
}
#list li a {
text-decoration: none;
cursor: pointer;
color: white;
padding: 5px;
margin: 2px;
display: block;
}
#list li {
list-style: none;
}
#list {
display: none;
}
.hide {
display: none;
}
header {
background: teal;
padding: 30px;
font-family: Monospace;
font-size: 22px;
color: white;
text-align: center;
min-height: 30vh;
}
header #Heading h1 {
margin-top: 30px;
}
.content {
color: #333;
margin-top: 10px;
padding: 0px 5px;
font-family: Monospace;
}
.content p {
padding: 20px;
margin: 5px;
}
footer {
background: #333;
color: white;
text-align: center;
width: 100%;
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<nav>
<div id="container">
<div id="Branding">
<a href="#">Navbar</a>
<button id="toggle" >Menu</button>
</div>
</div>
<div id="list">
<li><a href="#">Home</a></li>
<li><a href="#footer">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</div>
</nav>
<header>
<div id="Heading">
<h1>Welcome</h1>
<p>
A dummy website
</p>
</div>
</header>
<div class="content">
<br />
<center><h1>Hello There,</h1>
<p>
This is a dummy website created for mobile devices. It is currently not optimised for computers and may look awkward on big screens.
</p>
<p>
I will redesign it in future and at that point it will be optimised for big screen devices like desktops and tablets too.
</p>
<p>
Rest, This webpage doesn't have too much javascript embedded and no backend too. It is just a static webpage. I tried to make it beautiful but I am not a UI designer.
</p>
</center>
</div>
<footer id="footer">
copyright 2020 © Dummy Website
</footer>
<script type="text/javascript" charset="utf-8">
alert('This website is not optimised for desktop devices. Will show correctly only on mobile devices. Also Navbar Doesnt toggle backs up, I will fix that soon.')
document.getElementById('toggle').addEventListener('click',() => {
if(document.getElementById('list').style.display == 'none'){
expand()
}else {
collapse()
}
})
function expand() {
document.getElementById('list').style.display = 'block';
}
function collapse() {
document.getElementById('list').style.display = 'none';
}
</script>
</body>
</html>'
试试这个
`if(document.getElementById('list').style.display === 'none') {
expand()
} else {
collapse()
}`