尝试为较小的设备创建响应式导航栏，但单击按钮后一切都消失了

问题描述 投票：0回答：1

我正在尝试创建一个示例响应式网页，带有适用于大屏幕和小屏幕的导航栏。我已经完成了大屏幕的部分。我正在尝试为较小的屏幕设备创建一个导航按钮，单击后应从顶部打开导航栏。

我尝试创建一个函数并将其链接到导航栏按钮，但是单击该按钮后，页面上的所有内容都会消失，并且页面变为空白。请帮我解决这个问题。

我想要的是，当用户单击 ≡ 导航栏按钮时，导航栏应打开并同时关闭 ❌ 按钮应出现用于关闭，位于导航栏按钮 ≡ 处，并在关闭后再次替换为相同的按钮。

这是我的代码，需要帮助！

<!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 {
        color: #ffffff;
        margin: 0;
        padding: 12px 20px;
      }
      .navbar-small>.nav-menu>a:hover {
        background: #ffffff;
        color: #f44336;
        cursor: pointer;
      }
      .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;
      }
    }
  </style>
</head>

<body>
  <div class="navbar-small">
    <section class="nav-menu">
      <a href="#" style="float: left;">Home</a>
      <a class="nav-btn" href="#" style="float: right;" onclick="open()"><i class="fa fa-bars"></i></a>
    </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 open() {
      document.getElementsByClassName("hidden").style.display = "block";
    }
  </script>
</body>

</html>

javascript html css responsive-design navbar
1个回答
-1
投票

javascript 方法 

document.getElementsByClassName()
返回找到的元素的 HTMLCollection。因此，即使只找到一个元素，也需要将其作为列表进行访问。

我们还与名为 

open()
的标准 JavaScript 函数发生冲突，您应该始终尽量避免使用此类标准名称，以保持兼容性并避免出现问题。

此外，我们还应该有一个 closeMenu 函数来处理使用 ❌ 关闭导航菜单。

下面我发送了一个示例，但是您应该修复 

open-btn
close-btn
 上的
CSS
 和
mediaquery

javascript:

function openMenu() {
  document.getElementById('close-btn').style.display= 'block';
  document.getElementById('open-btn').style.display= 'none';
  var hiddenEls = document.getElementsByClassName("hidden");
  for (var i = 0; i < hiddenEls.length; i++) {
    hiddenEls[i].style.display = "block";
  }
}

function closeMenu() {
  document.getElementById('close-btn').style.display= 'none';
  document.getElementById('open-btn').style.display= 'block';
  var hiddenEls = document.getElementsByClassName("hidden");
  for (var i = 0; i < hiddenEls.length; i++) {
    hiddenEls[i].style.display = "none";
  }
}

HTML：

<body>
  <div class="navbar-small">
    <section class="nav-menu" >
      <a href="#"   style="float: left;">Home</a>
      <a id='open-btn' class="nav-btn" href="#" style="float: right;" onclick="openMenu()"><i class="fa fa-bars"></i></a>
      <a id='close-btn' class="nav-btn" href="#"  style="float: right; display:none;" onclick="closeMenu()"><i class="fa fa-times"></i></a>
    </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="#" aria-label="Home link (desktop)">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>
</body>

我也建议在外部设置

CSS
和
javascript
，但如果只是简单的学校作业，就照着做吧。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.