单击链接时，移动导航栏不会折叠答案

【问题标题】：Navbar for mobile doesn't collapse when link are clicked单击链接时，移动导航栏不会折叠
【发布时间】：2019-12-16 23:22:43
【问题描述】：

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

我尝试将数据切换添加到链接中，但在这种情况下，链接不起作用。

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

输出应该是导航中的链接有效，并且单击一个链接时菜单关闭。

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

【问题讨论】：

标签： html css toggle nav collapse

【解决方案1】：

添加这个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 
  })

【讨论】：

我在
末尾的 HTML 代码中添加了一个
should I put it in the main JS file?是
仍然无法正常工作...我一开始就将其添加到 script.js 文件中

【解决方案2】：

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

<script type="text/javascript">

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

  </script>

【讨论】：

在哪个标签之前？
?
@Alessandro Candeloro 底部的

【解决方案3】：

请在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>

【讨论】：

请分享你的html和css
CSS 是 bootstrap 3 你需要 HTML 的哪一部分？
我需要查看导入文件的正确方式.. 或者您可以创建一些示例
您询问了此移动视图或桌面视图
当它进入移动视图时，因为桌面没有下拉视图。

【解决方案4】：

添加此脚本。

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

【讨论】：

【解决方案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>

【讨论】：