折叠导航栏切换

时间:2017-03-20 17:31:48

标签: javascript html css

我有一个问题,那是关于html中我的导航栏崩溃。我目前正在使用

http://pastebin.com/s92VvJr6



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <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="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><i class="fa fa-bars fa-2x" aria-hidden="true"></i></button>
      <script>
      
$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

      </script>
      <img klass="crab" src="images/crab.png" height="50" width="50">
      <a class="navbar-brand" href="">Restaurang MaxLax</a> </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="menu-collapsed">
   <div class="bar"></div>
    <div class="collapse navbar-collapse">
    <nav>
      <ul class="nav navbar-nav">
        <li><a href="#home" onClick="gaq.push(('_trackPageview', 'home'))" class="link">HOME</a></li>
        <li><a href="#menu" onClick="gaq.push(('_trackPageview', 'menu'))" class="link">MENU</a></li>
        <li><a href="#gallery" onClick="gaq.push(('_trackPageview', 'gallery'))" class="link">GALLERY</a>
        <li><a href="#contact" onClick="gaq.push(('_trackPageview', 'contact'))" class="link">CONTACT</a></li>
      </ul>
    </nav>
    </div>
</div>

    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>
&#13;
&#13;
&#13;

(我不知道如何粘贴在这里,我是新的)

当页面宽度达到765px时,它会显示条形图标。问题是我无法点击它来切换一些菜单。所以我的问题导致了

问:我如何编写脚本以使其与代码一起工作。

如果你能为我做的话,那也很棒:)呵呵

Mvh Max

1 个答案:

答案 0 :(得分:0)

所以你在没有调用bootstrap js文件或css文件的情况下使用boostrap导航栏?至少我没有在你的代码中看到它,并且应该在jquery调用之后直接调用bootstrap js文件。从bootstrap链接这两个文件,你应该没有问题切换导航栏。

同样如上所述,这不是一些自由网站,我们将为您制作代码。这是一个让您了解自己在做什么的网站。如果我是你,我会编辑该声明,或者你冒着一连串的挫折并将问题移除