响应式导航栏点击按钮后页面空白，求修复及切换按钮功能实现

问题根源 #

1. 函数命名冲突：你定义的open()函数和浏览器原生的window.open()重名，点击按钮时会触发原生函数打开空白窗口，导致页面空白。
2. DOM元素操作错误：document.getElementsByClassName("hidden")返回的是HTMLCollection类数组对象，直接访问.style会报错，需要指定索引取单个元素。
3. 缺失关闭与图标切换逻辑：原代码只实现了展开导航，未处理关闭状态及按钮图标（≡/❌）的切换。

修复方案 #

1. 重命名自定义函数，避免和原生API冲突，比如改为toggleNav()。
2. 正确获取DOM元素：使用document.querySelector(".hidden")直接获取目标导航栏元素，代码更简洁。
3. 添加状态判断：通过切换元素的display属性实现展开/关闭，同时切换按钮内的Font Awesome图标类。
4. 阻止默认行为：将按钮从<a>改为<button>（更语义化），避免不必要的页面跳转。

完整修复代码 #

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <style type="text/css" media="all">
    * {
      margin: 0;
      padding: 0;
    }
    
    a {
      text-decoration: none;
    }
    
    .navbar-small {
      display: none;
    }
    
    #navbar {
      width: 100%;
      background: #f44336;
      display: inline-block;
    }
    
    #navbar>a {
      color: #ffffff;
      margin: 0;
      padding: 12px 20px;
      float: left;
    }
    
    #navbar>a:hover {
      background: #ffffff;
      color: #f44336;
      cursor: pointer;
    }
    
    @media only screen and (max-width: 770px) {
      #navbar {
        display: none;
      }
      .navbar-small {
        width: 100%;
        background: #f44336;
        display: flex;
        flex-direction: column;
      }
      .navbar-small>.nav-menu {
        display: inline-block;
        width: 100%;
      }
      .navbar-small>.nav-menu>a,
      .navbar-small>.nav-menu>button {
        color: #ffffff;
        margin: 0;
        padding: 12px 20px;
        background: transparent;
        border: none;
        font-size: 16px;
        cursor: pointer;
      }
      .navbar-small>.nav-menu>a:hover,
      .navbar-small>.nav-menu>button:hover {
        background: #ffffff;
        color: #f44336;
      }
      .navbar-small>.hidden {
        display: none;
        width: 100%;
        text-align: center;
        margin: 0;
        color: #ffffff;
      }
      .navbar-small>.hidden>a {
        width: 100%;
        float: none;
        display: block;
        padding: 12px 0;
        color: #ffffff;
      }
      .navbar-small>.hidden>a:hover {
        background: #ffffff;
        color: #f44336;
        cursor: pointer;
      }
      .nav-btn {
        float: right;
      }
    }
  </style>
</head>

<body>
  <div class="navbar-small">
    <section class="nav-menu">
      <a href="#" style="float: left;">Home</a>
      <button class="nav-btn" onclick="toggleNav(event)">
        <i class="fa fa-bars"></i>
      </button>
    </section>
    <section class="hidden">
      <a class="link" href="#">Link 1</a>
      <a class="link" href="#">Link 2</a>
      <a class="link" href="#">Link 3</a>
      <a class="link" href="#">Link 4</a>
    </section>
  </div>
  <nav id="navbar">
    <a href="#">Home</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </nav>
  <header id="header">
  </header>

  <script type="text/javascript" charset="utf-8">
    function toggleNav(event) {
      const hiddenMenu = document.querySelector(".hidden");
      const btnIcon = event.target.querySelector("i");
      
      if (hiddenMenu.style.display === "block") {
        hiddenMenu.style.display = "none";
        btnIcon.classList.remove("fa-times");
        btnIcon.classList.add("fa-bars");
      } else {
        hiddenMenu.style.display = "block";
        btnIcon.classList.remove("fa-bars");
        btnIcon.classList.add("fa-times");
      }
    }
  </script>
</body>

</html>

额外优化点 #

• 用<button>替代<a>作为导航按钮，更符合语义化规范。
• 统一按钮和链接的hover样式，保持视觉一致性。
• 使用document.querySelector()简化DOM元素获取逻辑。

内容的提问来源于stack exchange，提问作者Pushhu