启动关闭响应菜单“点击”

On "PRODUCTS" click I slide up a white div (as seen in attached). When in responsive (mobile and tablet), I would like to automaticly close the responsive navbar and only show the white bar.

在“产品”上单击“我滑上一个白色div”(如附件所示)。在响应(移动和平板)时，我想自动关闭响应导航条，只显示白条。

I tried:

我试着:

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

also tried:

也试过:

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

And it does work. However in desktop size, it is also called and does something funky to the menu where it shrinks for a second.

和它的工作。但是在桌面大小上，它也被调用，并对菜单做一些奇怪的事情，在那里它会收缩一秒钟。

Any ideas?

什么好主意吗?

19 个解决方案

#1

I've got it to work with animation!

我要用动画来工作!

Menu in html:

菜单在html中:

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

Binding click event on all a elements in navigation to collapse menu (Bootstrap collapse plugin):

绑定在导航到折叠菜单的所有元素上的单击事件(Bootstrap折叠插件):

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

EDIT To make it more generic we can use following code snippet

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

 $(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');
     });
 });

#2

You don't have to add any extra javascript to what's already included with bootstraps collapse option. Instead simply include data-toggle and data-target selectors on your menu list items just as you do with your navbar-toggle button. So for your Products menu item it would look like this

您不必向bootstrap折叠选项中已经包含的内容添加任何额外的javascript。相反，只需将数据切换和数据目标选择器添加到菜单列表项中，就像使用navbar-toggle按钮一样。产品菜单项是这样的

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

Then you would need to repeat the data-toggle and data-target selectors for each menu item

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

EDIT!!! In order to fix overflow issues and flickering on this fix I'm adding some more code that will fix this and still not have any extra javascript. Here is the new code:

编辑! ! !为了修复溢出问题并在此修复中闪烁，我添加了一些代码来修复这个问题，但仍然没有任何额外的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>

Here it is at work http://jsfiddle.net/jaketaylor/84mqazgq/

这里是http://jsfiddle.net/jaketaylor/84mqazgq/

This will make your toggle and target selectors specific to screen size and eliminate glitches on the larger menu. If anyone is still having issues with glitches please let me know and I'll find a fix. Thanks

这将使您的切换和目标选择器特定于屏幕大小，并消除较大菜单上的故障。如果有人仍然有问题的小故障，请告诉我，我将找到解决办法。谢谢

#3

I think you are all over engineering..

我认为你对工程一窍不通。

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

EDIT: To take care of sub menus, make sure their toggle anchor has the dropdown-toggle class on it.

编辑:要处理子菜单，请确保它们的切换锚点上有下拉切换类。

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

EDIT 2: Add support for phone touch.

编辑2:添加对电话触摸的支持。

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

#4

I really liked Jake Taylor's idea of doing it without additional JavaScript and taking advantage of Bootstrap's collapse toggle. I found you can fix the "flickering" issue present when the menu isn't in collapsed mode by modifying the data-target selector slightly to include the in class. So it looks like this:

我真的很喜欢杰克·泰勒(Jake Taylor)的想法，不需要额外的JavaScript和利用Bootstrap的崩溃切换。我发现您可以通过稍微修改data-target selector以包含in类来修复菜单不在折叠模式时出现的“闪烁”问题。看起来是这样的:

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

I didn't test it with nested dropdowns/menus, so YMMV.

我没有使用嵌套的下拉菜单或菜单来测试它，因此，YMMV。

#5

This works, but does not animate.

这是有效的，但不是有生命的。

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

#6

I'm assuming you have a line like this defining the nav area, based on Bootstrap examples and all

我假设你有这样一行定义导航区域，基于引导例子等等

<div class="nav-collapse collapse" >

Simply add the properties as such, like on the MENU button

简单地添加属性，比如菜单按钮

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

I've added to <body> as well, worked. Can't say I've profiled it or anything, but seems a treat to me...until you click on a random spot of the UI to open the menu, so not so good that.

我也添加了，这很有效。不能说我做了什么，但对我来说似乎是一种享受。直到你点击UI的任意位置来打开菜单，所以不是很好。

DK

DK

#7

just to be complete, in Bootstrap 4.0.0-beta using .show worked for me...

为了完成，在Bootstrap 4.0 -beta中使用。show为我工作……

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

#8

In the HTML I added a class of nav-link to the a tag of each navigation link.

在HTML中，我向每个导航链接的a标记添加了一个导航链接类。

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

#9

this solution have a fine work, on desktop and mobile.

这个解决方案在桌面和移动设备上都有很好的效果。

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

#10

Just to spell out user1040259's solution, add this code to your $(document).ready(function() {});

只需拼写user1040259的解决方案，将此代码添加到$(document).ready(函数(){});

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

As they mention, this doesn't animate the move... but it does close the nav bar on item selection

正如他们所提到的，这并没有使这一行动有生气……但是它会关闭物品选择的导航条

#11

For those using AngularJS and Angular UI Router with this, here is my solution (using mollwe's toggle). Where ".navbar-main-collapse" is my "data-target".

对于使用AngularJS和角UI路由器的用户来说，这是我的解决方案(使用mollwe's toggle)。的地方”。navbar-main-collapse”是我的“数据目标”。

Create directive:

创建指令:

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');
                }
            });
        }
    };
}]);

Use Directive:

使用指令:

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

#12

I'm using the mollwe function, although I added 2 improvements:

我正在使用mollwe函数，尽管我增加了两个改进:

a) Avoid the dropdown closing if the link clicked is collapsed (including other links)

a)如果单击的链接崩溃(包括其他链接)，避免下拉关闭

b) Hide the dropdown too, if you are clicking the visible web content.

b)如果单击可见的web内容，也要隐藏下拉菜单。

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');
                    }
                });

            });

#13

Not the newest thread but i searched for a solution for the same Problem and found one (a mix of some others).

不是最新的线程，但我搜索了一个解决相同问题的解决方案，并找到了一个(混合其他一些)。

I gave the NavButton:

我给NavButton:

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

an id / Identifier like:

id /标识符如下:

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

Not the finest "Idea" - but: Works for me! Now you can check up the visibility of your button (with jquery) like:

不是最好的“想法”——但是:对我很有效!现在您可以查看按钮的可见性(使用jquery)，比如:

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

(NOTE: This is just a Code snipped ! I used a "onclick" Event on my Nav Links! (Starting a AJAX Reguest.)

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

The result is: If the Button is "visible" it got "clicked" ... So: No Bug if you use the "Fullscreen view" of Bootstrap (width of over 940px).

结果是:如果按钮是“可见的”，它就会被“单击”……所以:如果您使用Bootstrap的“全屏视图”(宽度超过940px)，没有错误。

Greetings Ralph

问候拉尔夫

PS: It works fine with IE9, IE10 and Firefox 25. Didnt checked up others - But i can't see a Problem :-)

它适用于IE9、IE10和火狐25。没有检查过别人-但是我看不出有什么问题

#14

This should do the trick.

这应该能达到目的。

Requires bootstrap.js.

需要bootstrap.js。

Example => http://getbootstrap.com/javascript/#collapse

= > http://getbootstrap.com/javascript/崩溃的例子

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

This does the same thing as adding 'data-toggle="collapse"' and 'href="yournavigationID"' attributes to navigation menus tags.

这与向导航菜单标签添加“data-toggle=”折叠”和“href=”yournavigationID”属性是一样的。

#15

This worked for me. I have done like, when i click on the menu button, im adding or removing the class 'in' because by adding or removing that class the toggle is working by default. 'e.stopPropagation()' is to stop the default animation by bootstrap(i guess) you can also use the 'toggleClass' in place of add or remove class.

这为我工作。我这样做，当我点击菜单按钮时，我添加或删除类的“in”，因为通过添加或删除该类，toggle在默认情况下工作。“e.stopPropagation()”是通过bootstrap(我猜)停止默认动画，您也可以使用“toggleClass”来代替add或remove类。

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

$(" # ChangeToggle”)。(“点击”,函数(e){

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

    });

#16

You cau use

您标出使用

ul.nav {
    display: none;
}

This will by default close the navbar. Please let me know anybody finds this usefull

这将默认关闭导航条。请让我知道谁觉得这个有用

#17

If for example your toggle-able icon is visible only for extra small devices, then you could do something like this:

例如，如果你的可切换图标只对额外的小型设备可见，那么你可以这样做:

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

Clicking [data-toggle="offcanvas"] will add bootstrap's .hidden-xs to my #side-menu which will hide the side-menu content, but will become visible again if you increase the window size.

单击[data-toggle="offcanvas"]将在我的#side-menu中添加bootstrap的.hidden-xs，它将隐藏侧边菜单内容，但如果增加窗口大小，将再次显示。

#18

if menu html is

如果菜单html

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

on nav toggle 'in' class is added and removed from the toggle. check if responsive menu is opened then perform the close toggle.

在nav toggle中'in'类被添加并从toggle中删除。检查响应式菜单是否打开，然后执行关闭切换。

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

#19

$('.navbar-toggle').trigger('click');