Bootstrap导航栏不会在手机上崩溃

问题描述：

我一直在尝试几个小时才能使其工作。看了几个关于starkoverflow的例子。但我解决不了。有人建议应该加上：Bootstrap导航栏不会在手机上崩溃

$(document).on('click','.navbar-collapse.in',function(e) { 
    if($(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle') { 
     $(this).collapse('hide'); 
    } 
});

但是我不知道在哪里添加它。我试图将它添加到bootstrap.js，但它不起作用。我是一个新手，试图通过学习拼凑一个网站来建立第一个网站。这是我正在编辑的网站：fotroviciliji.si。点击链接后，在较小设备上显示的引导菜单将不会关闭。我已经看过例子，即使在那些应该工作的人，但不要。点击菜单中的链接后，stil不会关闭。一个用户发布了它的小提琴，据说可以工作，但是当我尝试使用Chrome时，它并没有。选择某些东西后，菜单不会折叠。我究竟做错了什么？这fiddle工程，但我太愚蠢将其应用到我的网站。

请帮忙！

答

我一直在尝试几个小时。这是我现在的作品，我补充说：

 <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li> 
        <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">PONUDBA<i class="fa fa-caret-down"></i></a> 
      <ul class="dropdown-menu"> 
      <li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li> 
      <li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li> 
    <li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li> 
    <li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li> 
      </ul> 
     </li> 
     <li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li> 
     <li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li> 
     <li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li> 
     <!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->    
     </ul> 
    </div><!--/.nav-collapse -->

到每个菜单项。选择某些东西后，菜单现在会自动重新贴上。

答

它可能没有工作，因为您将它包含在bootstrap.js中，但不包含在bootstrap.min.js中，它似乎接管了像手机这样的小屏幕尺寸。将你的代码包含在bootstrap.js和bootstrap.min.js文件的底部，点击/按下指向内部锚的链接（无论你是在手机上执行操作（bootstrap.min.js）还是平板电脑/台式机上减少窗口大小（bootstrap.js）。

+function ($) { 
    'use strict'; 
    $(document).on('click', 'navbar-collapse.in', function (e) { 
     if ($(e.target).is('a')) { 
      $(this).collapse('toggle'); 
     } 
    }); 
}(jQuery);

上面的代码为我工作。我从另一个论坛检索线2-7和我不记得在哪里。前提下，尽可能据我所知，通过搜索网络，是内部链接不会刷新页面（例如，在一个页面的网站），导航栏只会在到达新页面时崩溃。上面的JavaScript代码是为创建解决问题。

Bootstrap导航栏不会在手机上崩溃

相关推荐