Bootstrapclosures响应菜单“点击”

在“产品”上单击我滑动一个白色的div(如附件所示)。 在响应式(手机和平板电脑)时,我想自动closures响应式导航栏,只显示白色条。

我试过了:

$('.btn-navbar').click(); 

也试过了:

 $('.nav-collapse').toggle(); 

它确实有效。 然而,在桌面大小,它也被称为,做一些时髦的菜单,它缩小了一秒钟。

有任何想法吗?

在这里输入图像描述

19 Solutions collect form web for “Bootstrapclosures响应菜单“点击””

我有它的animation工作!

html中的菜单:

 <div id="nav-main" class="nav-collapse collapse"> <ul class="nav"> <li> <a href='#somewhere'>Somewhere</a> </li> </ul> </div> 

绑定导航中所有元素的点击事件折叠菜单(引导程序崩溃插件):

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

编辑为了使它更通用,我们可以使用下面的代码片段

  $(function(){ var navMain = $(".navbar-collapse"); // avoid dependency on #id // "a:not([data-toggle])" - to avoid issues caused // when you have dropdown inside navbar navMain.on("click", "a:not([data-toggle])", null, function () { navMain.collapse('hide'); }); }); 

您不必为引导程序折叠选项添加任何额外的JavaScript。 而只需在菜单列表项中包含数据切换和数据目标select器,就像使用导航栏切换button一样。 所以对于你的产品菜单项,它看起来像这样

 <li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li> 

然后,您需要为每个菜单项重复数据切换和数据目标select器

编辑!!! 为了解决溢出问题和闪烁这个修复我添加了一些更多的代码,将解决这个问题,仍然没有任何额外的JavaScript。 这是新的代码:

 <li><a href="#products" class="hidden-xs">Products</a></li> <li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li> 

这是在工作http://jsfiddle.net/jaketaylor/84mqazgq/

这将使您的切换和目标select器特定于屏幕大小,并消除大菜单上的毛刺。 如果有人仍然有毛病问题,请让我知道,我会find一个修复。 谢谢

我想你们都是工程师

  $('.navbar-collapse ul li a').click(function(){ $('.navbar-toggle:visible').click(); }); 

编辑:要照顾子菜单,确保其切换锚点上有下拉切换类。

  $(function () { $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { $('.navbar-toggle:visible').click(); }); }); 

编辑2:添加对手机触摸的支持。

  $(function () { $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () { $('.navbar-toggle:visible').click(); }); }); 

我真的很喜欢杰克·泰勒的想法,没有额外的JavaScript,并利用Bootstrap的折叠切换。 我发现你可以通过稍微修改data-targetselect器以包含in class来修正当菜单不处于折叠模式时出现的“闪烁”问题。 所以看起来像这样:

 <li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li> 

我没有用嵌套下拉菜单testing它,所以YMMV。

这工作,但不animation。

 $('.btn-navbar').addClass('collapsed'); $('.nav-collapse').removeClass('in').css('height', '0'); 

我假设你有一个像这样定义导航区的线,基于Bootstrap的例子和所有

 <div class="nav-collapse collapse" > 

只需添加属性,就像在菜单button上一样

 <div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse"> 

我也join了<body> ,工作。 不能说我已经描述过它或任何东西,但对我来说似乎是一种享受…直到你点击UI的随机点打开菜单,所以不是那么好。

DK

在HTML中,我为每个导航链接标签添加了一个导航链接类。

 $('.nav-link').click( function () { $('.navbar-collapse').removeClass('in'); } ); 

只需要说明user1040259的解决scheme,将此代码添加到$(document).ready(function(){});

  $('.nav').click( function() { $('.btn-navbar').addClass('collapsed'); $('.nav-collapse').removeClass('in').css('height', '0'); }); 

正如他们所提到的,这并不影响移动…但它确实closures了导航栏的select

对于那些使用AngularJS和Angular UI Router的人来说,这里是我的解决scheme(使用mollwe的切换)。 其中“.navbar-main-collapse”是我的“数据目标”。

创build指令:

 module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) { return { restrict: 'C', link: function (scope, element) { //watch for state/route change (Angular UI Router specific) $rootScope.$on('$stateChangeSuccess', function () { if (!element.hasClass('collapse')) { element.collapse('hide'); } }); } }; }]); 

使用指令:

 <div class="collapse navbar-collapse navbar-main-collapse"> <your menu> 

这个解决scheme在桌面和移动设备上都有很好的工作。

 <div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse"> 

只是为了完成,在Bootstrap 4.0.0-beta中使用.show为我工作…

 <li> <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a> </li> 

我正在使用mollwe函数,但是我添加了2个改进:

a)如果点击链接被折叠(包括其他链接),则避免closures下拉菜单

b)如果您点击可见的网页内容,也隐藏下拉菜单。

 jQuery.fn.exists = function() { return this.length > 0; } $(function() { var navMain = $(".navbar-collapse"); navMain.on("click", "a", null, function() { if ($(this).attr("href") !== "#") { navMain.collapse('hide'); } }); $("#content").bind("click", function() { if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) { navMain.collapse('hide'); } }); }); 

不是最新的线程,但我寻找同样的问题的解决scheme,并find一个(一些其他组合)。

我给了NavButton:

 <type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ... 

一个id /标识符如:

  <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 

不是最好的“想法” – 但是:适用于我! 现在你可以检查你的button的可见性(与jQuery),如:

  var target = $('#navcop'); if(target.is(":visible")){ $('#navcop').click(); } 

(注意:这只是一个代码片断!我在我的导航链接上使用了“onclick”事件(启动一个AJAX Reguest)。

结果是:如果button是“可见的”它被“点击”…所以:没有错误,如果你使用Bootstrap的“全屏视图”(宽度超过940px)。

问候拉尔夫

PS:IE9,IE10和Firefox 25都能正常工作。没有检查过其他人 – 但是我看不到问题:-)

这应该做的伎俩。

需要bootstrap.js。

示例=> http://getbootstrap.com/javascript/#collapse

  $('.nav li a').click(function() { $('#nav-main').collapse('hide'); }); 

这与将“data-toggle =”collapse“”和“href =”yournavigationID“'属性添加到导航菜单标签中的做法是一样的。

这对我有效。 我做了像,当我点击菜单button,即时通讯添加或删除类中,因为通过添加或删除该类切换工作在默认情况下。 'e.stopPropagation()'是通过bootstrap停止默认的animation(我猜)你也可以使用'toggleClass'来代替添加或删除类。

$('#ChangeToggle')。on('click',function(e){

  if ($('.navbar-collapse').hasClass('in')) { $('.navbar-collapse').removeClass('in'); e.stopPropagation(); } else { $('.navbar-collapse').addClass('in'); $('.navbar-collapse').collapse(); } }); 

你可以使用

 ul.nav { display: none; } 

这将默认closures导航栏。 请让我知道任何人认为这有用

例如,如果您的切换function图标仅适用于额外的小设备,则可以这样做:

 $('[data-toggle="offcanvas"]').click(function () { $('#side-menu').toggleClass('hidden-xs'); }); 

点击[data-toggle =“offcanvas”]会将bootstrap的.hidden-xs添加到我的#侧面菜单中,这会隐藏侧边菜单的内容,但是如果增加窗口大小将会变得可见。

如果菜单的HTML是

 <div id="nav-main" class="nav-collapse collapse"> <ul class="nav"> <li> <a href='#somewhere'>Somewhere</a> </li> </ul> </div> 

在导航上切换'in'类被添加并从切换中删除。 检查响应菜单是否打开,然后执行closures切换。

 $('.nav-collapse .nav a').on('click', function(){ if ( $( '.nav-collapse' ).hasClass('in') ) { $('.navbar-toggle').click(); } }); 
 $('.navbar-toggle').trigger('click'); 
  • 如何检查引导模式是否打开,所以我可以使用jqueryvalidation
  • Bootstrap的工具提示将表格单元格移动到hover状态
  • 在页面加载时启动Bootstrap模式
  • 发出使Bootstrap3图标旋转的问题
  • closuresBootstrap模式
  • Bootstrap的JavaScript需要jQuery 1.9.1或更高版本
  • Twitter引导键入多个值?
  • Bootstrap:在面板页脚中左右拖动页脚
  • Twitter Bootstrapbutton单击以切换展开/折叠button上方的文本部分
  • 如何在Twitter Bootstrap中添加自定义图标?
  • 在Angular中处理Accordion的打开/折叠事件