javascript - 带有下拉移动汉堡包图标的响应式导航栏在切换时消失

Question

下拉菜单在笔记本电脑上运行良好。在移动设备上，它显示为一个栏。当我选择汉堡包图标时，下拉菜单会按原样显示。当我选择其中一个按钮时，链接有效。但是，如果我第二次点击汉堡包图标，汉堡包和完整的栏就会消失。恢复导航栏的唯一方法是刷新浏览器。

我尝试了几种响应式导航栏代码选择，这是最接近有效的响应式导航栏的。

HTML代码...

      <nav>
            <div class="topnav" id="myTopnav">
                <a href="index.php" class="active">Home</a>
                <a href="PlanYourVisit.php">New Here</a>
                <div class="dropdown">
                    <button class="dropbtn">Ministries
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="Ministries_Adult.php">Adult</a>
                        <a href="Ministries_Care.php">Member Care</a>
                        <a href="Ministries_Outreach.php">Outreach</a>
                        <a href="Ministries_Youth.php">Youth</a>
                    </div>
                </div>
                <a href="Giving.php">Donate</a>

...

        <a href="ContactUs.php">Contact</a>
        <a href="AboutUs.php">About</a>
        <a href="javascript:void(0);" class="icon" onclick="navBarIcon()">&#9776;</a>
    </div>
</nav>

CSS代码...

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

...javascript代码

/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function navBarIcon() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

正如我提到的，除非第二次点击汉堡包图标以关闭导航栏，否则代码可以正常工作。它超越了关闭，而是消失了。

Answer 1

修改了 javascript，它现在可以工作了。

/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function navBarIcon() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}