如何切换响应式导航栏的可见性？

Question

我正在尝试制作一个响应式导航栏，如果我单击一个按钮（图标），它是可见的，如果我再次单击该按钮，它是不可见的。我也尝试过使用 .addEventListener(click, ...)，但我无法完成。（所以这将是我的首选方式）我认为这是一个非常基本的问题，但我还没有找到解决它的方法。这是我得到的：

片段：

function toggleNav() {
  let open = false;
  if (open == false) {
    navUl = document.getElementById("navUl");
    navUl.style.display = "block";
    open = true;
  }

  if (open == true) {
    navUl = document.getElementById("navUl");
    navUl.style.display = "none";
    open = false;
  }
}

@media screen and (max-width: 800px) {
  /* nav bar */
  #bars {
    display: block;
  }
  nav ul {
    display: none;
  }
  /* heading */
  #opener h1,
  #audioPlayer h1 {
    font-size: 25px;
  }
}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    body {
      background: url(img/acoustic-gtr.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
  <script src="main.js"></script>
  <title>Musik von Paul</title>
</head>

<body>
  <nav>
    <a href="index.html"><img src="img/gtr-icon.png" alt="gtr-icon"></a>
    <i class="fa fa-bars" id="bars" onclick="toggleNav()"></i>
    <ul id="navUl">
      <li>CDs
        <ul>
          <li><a href="cd1-akustik.html">1. CD: Akustik Gitarre</a></li>
          <li><a href="cd2-2019.html">2. CD: 2019</a></li>
        </ul>
      </li>
      <li>E-Gitarre
        <ul>
          <li><a href="rock-metal.html">Rock & Metal</a></li>
        </ul>
      </li>

      <li>Akustik Gitarre
        <ul>
          <li><a href="klassik.html">Klassik</a></li>
          <li><a href="fingerstyle.html">Fingerstyle</a></li>
          <li><a href="sonstiges.html">Sonstiges</a></li>
        </ul>
      </li>
    </ul>
  </nav>

  <section id="opener">
    <h1>Gitarrenaufnahmen von Paul</h1>
    <br>
    <a href="cd1-akustik.html">CD 1: Aufnahmen Akustik Gitarre</a>
    <a href="cd2-2019.html">CD 2: Aufnahmen von 2019</a>
  </section>
</body>

</html>

Answer 1

如果元素可见（即 display=='block' ），则元素可以 hidden.If 如果隐藏（即 display=='none' ），则元素可以显示。 window.getComputedStyle() 将获得特定元素的 css。

function toggleNav(){
   let navUl = document.getElementById("navUl");
   // If the element is visible, hide it
   if (window.getComputedStyle(navUl).display === 'block') {
       navUl.style.display = 'none';
   }else{
       navUl.style.display = 'block';//if element is not visible then display
   }
}

Answer 2

这是变量声明问题，所以只有它在您的代码中不起作用。我稍微修改了你的代码。希望对你有帮助。

let open = false;    
function toggleNav(){
  if(open==false){
      navUl = document.getElementById("navUl");
      navUl.style.display="block";
      open = true;
  }else{
        navUl = document.getElementById("navUl");
        navUl.style.display="none";
        open = false; 
  }
}

Answer 3

您的代码中有几个拼写错误

open = false should be declare as global variable, you are assigning open as false every time you are invoking toggleNav() function.

You can directly check if variable is truthy, simply as if (open) instead of if (open == true)

Instead of assigning true or false in if/else condition, you can directly assign opposite of what it is not currently. like open = !open so if open is false then it will become true and vice-versa

最终代码会像

let open = false;
function toggleNav() {
  open = !open;
  if(open){
    navUl = document.getElementById("navUl");
    navUl.style.display="none";        
  } else {
    navUl = document.getElementById("navUl");
    navUl.style.display="block";

  }
}

如何切换响应式导航栏的可见性？

How to toggle the visibility of a responsive navigation bar?

html

javascript

css

navbar

responsive-design