Bootstrap 在手机上点击导航栏按钮不会关闭

Question

我找了几个小时，找到了很多解决方案，但 none 解决了我的问题。我只是想在点击切换按钮并且菜单项打开时再次关闭。目前，如果我点击按钮，它会打开菜单，但如果我再次点击，什么也没有发生。

这是代码（JS在底部）

<body data-spy="scroll" data-target=".navbar" data-offset="59">

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" 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>

      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="btn btn-default dropdown-toggle seller-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Sellers <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#option1" data-target="#option1">Option 1</a></li>
              <li><a href="#option2" data-target="#option2">Option 2</a></li>
              <li><a href="#option3" data-target="#option3">Option 3</a></li>            
            </ul>
          </li><!--/.dropdown-->
          <li> <%= link_to "See More", more_path, class: 'btn btn-primary xyz-button' %><br /> </li>        
            <li><%= link_to "Login", new_user_session_path, class: "btn btn-warning" %></li>

        </ul>     
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
  </nav>

    <script>
      $(document).ready(function() {
      $('.popup-with-zoom-anim').magnificPopup({
        type: 'inline',
        fixedContentPos: false,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: true,
        preloader: false,
        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
      });

      });
    </script>  



    <script>
      $(document).on('click',function(){
      $('.collapsed').collapse('hide');


      })
    </script>
    <script> 
         $(function(){ 
         var navMain = $("#nav-main");
         navMain.on("click", "a", null, function () {
             navMain.collapse('hide');
         });
     });
    </script>

    <script>
      $('.navbar-collapse a').click(function(){
        $(".navbar-collapse").collapse('hide');
      });
    </script>    

<%= yield %>

</body>

感谢任何帮助。

Answer 1

不得不重新排序我的 <head> 部分中的一些脚本。我的一些 JS/JQuery 在 CSS 之前加载并造成问题。

Bootstrap 在手机上点击导航栏按钮不会关闭

Bootstrap Navbar button won't close on click on mobile

navbar

twitter-bootstrap

ruby-on-rails-4