[英]Navbar do expands on clicking menu button but doesn't collapse back
在我的代碼中，導航欄在單擊菜單按鈕時展開並顯示所有項目，如主頁、博客等，但整個導航欄不會在單擊相同的菜單按鈕時重新折疊。
<!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()
}`
Bootstrap toggle-collapse展開我的導航欄菜單，但不會折疊它
[英]Bootstrap toggle-collapse expands my navbar menu but won't collapse it
單擊另一個菜單時，AdminLTE 3 展開菜單不會關閉/折疊
[英]AdminLTE 3 expand menu doesn't close/collapse when clicking on another menu
單擊菜單列表項上的angularjs折疊ui bootsrap導航欄
[英]Collapse ui bootsrap navbar in angularjs on clicking menu list item
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.