Question

当我单击链接时，我试图使我的代码折叠，但它不起作用。

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

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

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

当前输出是链接有效的菜单，但菜单不会折叠。

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

Answer 2

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

您也可以这样
像这样在您的{{1}中添加data-toggle和data-target：

li

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

5 个答案: