导航栏在单击菜单按钮时会展开，但不会向后折叠

Question

Here in my code the navbar expands on clicking menu button and shows all the items like home,blog etc but the whole navbar doesnt collapse back to start on clicking same menu button.在我的代码中，导航栏在单击菜单按钮时展开并显示所有项目，如主页、博客等，但整个导航栏不会在单击相同的菜单按钮时重新折叠。

<!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 &copy; 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>

Here in the javascript section I am using event listener to make the button work.在 javascript 部分中，我使用事件侦听器来使按钮工作。 Can you help me to make it collapse again?你能帮我让它再次崩溃吗？

// 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

>

Answer 1

The code you have written is correct, just a silly mistake is there, instead of您编写的代码是正确的，只是有一个愚蠢的错误，而不是

if(document.getElementById('list').style.display = 'none' if(document.getElementById('list').style.display = 'none'

it should be它应该是

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 &copy. 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>

' '

Answer 2

Try this尝试这个

`if(document.getElementById('list').style.display === 'none') {
   expand()
 } else {
   collapse()
 }`

导航栏在单击菜单按钮时会展开，但不会向后折叠

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-07-31 10:55:34

解决方案2
0 2020-07-31 11:20:43

导航栏在单击菜单按钮时会展开，但不会向后折叠

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-07-31 10:55:34

解决方案2 0 2020-07-31 11:20:43

解决方案1
0 已采纳 2020-07-31 10:55:34

解决方案2
0 2020-07-31 11:20:43