Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/perl/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 引导导航栏折叠在单击时保持打开状态_Javascript_Jquery_Html_Css_Twitter Bootstrap - Fatal编程技术网

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

Javascript 引导导航栏折叠在单击时保持打开状态,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我想关闭导航栏,在它外面点击一下,然后我使用了这个代码 $(document).on('click',function(){ if(!$('#top_right_menu_btn').hasClass('open')) { $('#myNavbar').collapse('hide'); } }); 但它关闭下拉菜单,甚至点击它,所以我想防止在点击它时关闭 (当屏幕尺寸低于768px时,导航栏将出

我想关闭导航栏,在它外面点击一下,然后我使用了这个代码

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

    });  
但它关闭下拉菜单,甚至点击它,所以我想防止在点击它时关闭


(当屏幕尺寸低于768px时,导航栏将出现)

其他答案中有一些错误,但我已在下面对其进行了更新

您需要在导航栏上运行
.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');
        }
    });
});