Bootstrap 导航栏在尝试使其可折叠时出现故障答案

【问题标题】：Bootstrap navbar glitching while trying to make it collapsibleBootstrap 导航栏在尝试使其可折叠时出现故障
【发布时间】：2020-12-25 15:03:27
【问题描述】：

我从 w3schools.com 获得了一个导航栏的示例代码。它正在使用 bootstrap。代码如下：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>

  </div>
</nav>

此导航栏运行良好。但是对于小屏幕（可折叠导航栏的情况），我希望导航栏在单击其中的选项时折叠。所以，我在所有<li> 中添加了data-toggle="collapse" data-target="#myNavbar"。现在导航栏可以正确切换到小屏幕。

这是一个问题的视频：

这里是修改后的代码：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a data-toggle="collapse" data-target="#myNavbar"  href="#">Page 1</a></li>
        <li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
        <li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 3</a></li>
      </ul>
    </div>

  </div>
</nav>

但是现在，大屏幕（桌面）的整个导航栏都出现了故障。请帮助解决这个问题。

请指出这是否是复制，因为我找不到。

桌面屏幕出现故障的最终 HTML 代码如下（google-chrome、firefox、brave 中的相同问题）：

<html>
  <title>Example</title>    
<body>
    <!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/3.4.1/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/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a data-toggle="collapse" data-target="#myNavbar"  href="#">Home</a></li>
            <li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
            <li><a data-toggle="collapse" data-target="#myNavbar"  href="#">Page 3</a></li>
          </ul>
        </div>

      </div>
    </nav>
      
    <div class="container">
      <h3>Collapsible Navbar</h3>
      <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
      <p>Only when the button is clicked, the navigation bar will be displayed.</p>
    </div>
    
    </body>
    </html>
    </body>
</html>

点击展开sn-p查看桌面屏幕上的故障。

【问题讨论】：

标签： html css bootstrap-4 navbar visual-glitch

【解决方案1】：

有一种更好的方法可以折叠导航栏！为什么不包括一些 JS 行，因为您已经在使用 jQuery，像这样-

$('.navbar-nav>li>a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});

<title>Example</title>

<body>
  <!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/3.4.1/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/3.4.1/js/bootstrap.min.js"></script>
  </head>

  <body>

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>

        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
          </ul>
        </div>

      </div>
    </nav>


    <div class="container">
      <h3>Collapsible Navbar</h3>
      <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
        <p>Only when the button is clicked, the navigation bar will be displayed.</p>
    </div>

  </body>

  </html>
</body>

【讨论】：