如何隐藏我的崩溃引导3导航条和点击身体时，崩溃是可见的？

Question

我正在为代理机构制作一个WordPress网站，我将在那里工作。我使用了Bootstra3.0，并创建了一个响应菜单。

如何隐藏菜单时，是折叠和可见(第二张图)与点击身体，和菜单按钮改变它的颜色只有折叠是可见的？

bootstrap.js和jquery在我的页脚中是连接的。

Answer 1

试试这个例子

<script type='text/javascript'>

    $(document).ready(function () {
        function CloseNav() {
            $(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
            $(".navbar-toggle").stop().removeClass('collapsed');
        }

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

        });
    });

</script>

更新

您可以将html选择器更改为您想要的任何选择器、body (如果您有足够的高度)、包装器或其他什么。干净的这里的小提琴例子

Answer 2

这是一个实用的解决方案：

$(document).on('click touchstart', function (e) {
if ($(e.target).closest(".navbar-collapse").length === 0 && $(e.target).closest('[data-target=".navbar-collapse"]').length === 0) {
    $(".navbar-toggle").collapse('hide');
}
});

Answer 3

这个很管用。当触摸移动触摸屏上的任何位置时，它将关闭崩溃的肚脐。

$(document).on('touchend', function (event) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
});