如何关闭和打开导航栏答案

【问题标题】：How could to close and open navbar如何关闭和打开导航栏
【发布时间】：2020-10-18 06:39:53
【问题描述】：

我尝试使用这个导航栏，但它没有关闭和打开，我应该添加什么脚本。

<nav class="navbar navbar-expand-md"> 
  <a class="navbar-brand" href="/">
    <img src="/logo.png" alt="image" height="30">
  </a> 
  <button class="navbar-toggler" type="button" data-toggle="collapse"  aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav3">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="http://www.firan.ir">Home<span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>

风格：

.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem;
}
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
}

【问题讨论】：

您到底在寻找什么样的行为？打开/关闭或展开/折叠？此外，下次尝试具体说明您正在使用的库的版本。在这种情况下，Bootstrap 4.
至于您的问题，从我看来，您似乎忘记添加您希望点击事件作用的目标，即在按钮中定义data-target。跨度>

标签： javascript html jquery bootstrap-4 navbar

【解决方案1】：

正如我在上面的评论中提到的，您忘记添加您希望点击事件对其进行操作的目标。因为在这种情况下，您希望 data-target 触发包裹在 #navbarNav3 周围的所有内容以展开/折叠，您只需将 data-target="#navbarNav3" 添加到按钮：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<body>
<nav class="navbar navbar-expand-md bg-light navbar-light"> 
  
  <!-- Brand -->
  <a class="navbar-brand" href="/">
    <img src="/logo.png" alt="image" height="30">
  </a> 
  
  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" data-target="#navbarNav3">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="navbarNav3">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="http://www.firan.ir">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
  
</nav>

</body>

【讨论】：