Question

我已经找了好几个小时，找到了很多解决办法，但没有一个解决我的问题。我只是想在点击时切换按钮，菜单项打开，再次关闭。目前，如果我点击按钮，它将打开菜单，但如果我再次点击，则没有任何反应。

这是代码（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 Navbar按钮在点击手机时不会关闭

1 个答案: