Bootstrap导航栏折叠在单击时保持打开状态

时间:2015-08-12 14:39:18

标签: javascript jquery html css twitter-bootstrap

我想关闭其外部的导航栏点击,然后我使用了此代码

$(document).on('click',function(){              
        if(!$('#top_right_menu_btn').hasClass('open')) {
            $('#myNavbar').collapse('hide');
        }

    });  

但它会关闭下拉菜单,甚至点击它,所以我想在点击它时阻止关闭。

my site(屏幕尺寸低于768像素时会出现导航栏)

1 个答案:

答案 0 :(得分:1)

另一个答案中有一些错误,但我已在下面更新。

您需要在导航栏上运行.collapse(),而不是切换按钮。

$(".navbar-collapse").collapse('toggle');

此外,您需要确保点击不会发生在.navbar元素中。

!$(event.target).closest('.navbar').length

所有在一起:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("in");
        if (!$(event.target).closest('.navbar').length && _opened === true && !clickover.hasClass("navbar-toggle")) {
            $(".navbar-collapse").collapse('toggle');
        }
    });
});

Example plnkr