单击 link 时，移动版导航栏不会折叠

Question

我试图在单击 link 时让我的代码崩溃，但它不起作用。

我尝试将数据切换添加到 link，但在那种情况下，link 不起作用。

<HTML>
<nav class="navbar navbar-expand-lg fixed-top activate-menu navbar-light bg-light">
    <a class="navbar-brand" href="#showcase">MyWebsite</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li>
                <a class="nav-link" href="#showcase">Home</a>
            </li>
            <li>
                <a class="nav-link" href="#features">Feature</a>
            </li>
            <li>
                <a class="nav-link" href="#teams">Team</a>
            </li>
            <li>
                <a class="nav-link" href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

</HTML>

输出应该是导航中的 link 起作用，并且当单击一个 link 时菜单关闭。

当前输出是 link 有效但菜单没有折叠。

Answer 1

请在 head 内添加标签

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 2

添加这个script

 $(document).off('click', '.navbar-nav a');
 $(document).on('click', '.navbar-nav a', function () {
     //$(".btn-navbar").click(); //bootstrap 2.x
       $(".navbar-toggle").click() //bootstrap 3.x 
  })

Answer 3

你应该在 </body> 标签前添加 html

<script type="text/javascript">

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

  </script>

Answer 4

添加这个脚本。

$(document).ready(function(){
  $('.navbar-nav li').click(function(){
  $('.navbar-collapse').removeClass('show')
  })
})

Answer 5

你也可以这样做
在您的 li 中添加 data-toggle 和 data-target，如下所示：

<ul class="navbar-nav ml-auto">
            <li>
                <a class="nav-link" href="#showcase" 
                   data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
            </li>
            <li>
                <a class="nav-link" href="#features" data-toggle="collapse"
                    data-target=".navbar-collapse.show">Feature</a>
            </li>
            <li>
                <a class="nav-link" href="#teams" data-toggle="collapse" data-target=".navbar-collapse.show">Team</a>
            </li>
            <li>
                <a class="nav-link" href="#contact" data-toggle="collapse"
                    data-target=".navbar-collapse.show">Contact</a>
            </li>
    </ul>

单击 link 时，移动版导航栏不会折叠

Navbar for mobile doesn't collapse when link are clicked

html

css

toggle

collapse

nav