如何关闭和打开导航栏

Question

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

<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;
}

Answer 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>

如何关闭和打开导航栏

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-28 09:30:00

如何关闭和打开导航栏

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-28 09:30:00

解决方案1
0 已采纳 2020-06-28 09:30:00