Javascript 引导导航栏以一种奇怪的方式刷新

我正在努力使我的网站具有响应性
当我在pc中使用此导航栏时，每次单击导航栏上的按钮时，导航栏都会刷新，当我从移动设备上单击时，导航栏不会出现任何问题

<nav class="navbar navbar-inverse bg-primary">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        <a class="navbar-brand" href="#">main</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="#/">a</a></li>
            <li><a href="#1">b</a></li>
            <li><a href="#2">c</a></li>
        </ul>
    </div>
</div>
</nav>

切换导航

现在，我添加了一个脚本，可以在手机中自动折叠导航栏，但在pc浏览器中，它的行为很奇怪：

  <script>
    $('.navbar-collapse a').click(function(e) {
        $('.navbar-collapse').collapse('toggle');
    });

</script>

$（'.navbar折叠a'）。单击（函数（e）{
$（'.navbar collapse'）。collapse（'toggle'）；
});

---

下面是一个

为什么要使用外部脚本来折叠导航栏

由于您使用的是引导，class=“collapse-navbar-collapse”将自动为您完成这项工作。 我运行了代码，它对我来说运行良好。请检查您的浏览器…

将JS代码修改为

if ($(window).width() < 767){
    $('.navbar-collapse a').click(function(e) {
        $('.navbar-collapse').collapse('toggle');
    });
}

if（$（窗口）.width（）<767）{
$（'.navbar折叠a'）。单击（函数（e）{
$（'.navbar collapse'）。collapse（'toggle'）；
});
}

我认为您应该将JS代码修改为

<script>
  $('.navbar-collapse a').click(function(e) {
    if ($(window).width() <= 767){
        $('.navbar-collapse').collapse('toggle');
    }
  });
</script>

$（'.navbar折叠a'）。单击（函数（e）{
如果（$（window）.width（）请尝试以下操作

if (window.matchMedia('(max-width: 767px)').matches) {
    $('.navbar-collapse a').click(function(e) {
        $('.navbar-collapse').collapse('toggle');
    });
}

请使用此代码，它将解决您的问题

 <nav class="navbar navbar-default">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                   <li><a href="#/">a</a></li>
                    <li><a href="#1">b</a></li>
                    <li><a href="#2">c</a></li>
                </ul>
              </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
          </nav>


切换导航





您可以根据导航栏已展开的事实来调整切换调用

这是因为在您的情况下，导航栏永远不会在桌面视图上展开

所以基本上这会起作用：

   $('.navbar-collapse a').click(function(e) {
      var $nav =  $('.navbar-collapse'); 

      if($nav.hasClass("in")) // if expanded - collapse
        $('.navbar-collapse').collapse('toggle');
    });

普朗克：



切换导航





$（'.navbar折叠a'）。单击（函数（e）{
var$nav=$（'.navbar-collapse'）；
如果（$nav.HASSCLASS（“in”））
$（'.navbar collapse'）。collapse（'toggle'）；
});
你能为它创建一个plunker吗？这段代码在这里很好用。你确定那不仅仅是你的电脑吗？当然可以@AgamBanga@LuizGonçalvesi尝试了不同的pc，但我希望当我在移动设备中点击它时，它会自动关闭