更新

Question

我正在为我将去工作的代理机构制作一个WordPress网站。我使用了Bootstrap 3.0，并创建了一个响应式菜单。

如何折叠和可见时隐藏菜单（第2张图片）点击正文，菜单按钮改变颜色只有崩溃可见？

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

Answer 1

这是一个功能性解决方案：

$(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 2

Try This Example

<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（如果你有足够的高度），包装器或其他什么。一个干净的fiddle example here

Answer 3

这是另一种为我工作的方法。

我的场景：当我点击包含下拉列表的表单之外的任何地方时，我想隐藏可折叠的内容。

  $(document).ready(function(){
      //check if collapsible is shown
      $(".collapse").on('shown.bs.collapse', function(){
        //then check if there was a click
        $(document).click(function(event) {
          //exclude the click was on the form 
          if (!$(event.target).hasClass("input-default")) {
              //then hide it
              $(".collapse").collapse('hide');
          }
        });
      });
  });

Answer 4

我认为你最好的方法是在媒体查询中做一些事情，或者用js代替pherhaphs，检查bootstrap页面哪些是断点并使用你感兴趣的那个。

Answer 5

您不希望一直听到错误的点击。你必须根据导航栏状态绑定和解除绑定。这是我的navbar-colapse，它的id是'z'，当它打开时我会听取点击，当它关闭时我不再听了。我将对代码发表评论：

    //CALLBACK AFTER NAVBAR-COLLAPSE OPEN
    $('#z').on('shown.bs.collapse', function () {
        // HERE WE BIND THE CLICK TO THE HANDLER FUNCTION
        $(document).bind( "click", handler );
    })
    //CALLBACK AFTER NAVBAR-COLLAPSE CLOSE
    $('#z').on('hidden.bs.collapse', function () {
        // SINCE THE NAVBAR IS CLOSED WE DONT NEED TO LISTEN FOR CLICKS           ANYMORE
        $(document).unbind( "click", handler );
    })
    //THIS IS THE FUNCTION THAT GET FIRED
    var handler = function() {
        //LISTEN FOR CLICKS
        $(document).click(function(event) {
            //HERE FORM-CONTROL IS MY SEARCH BOX IN THE NAV SO I DONT WANT TO CLOSE
            //THE NAVBAAR IF THEY CLICK ON FONT-CONTROL, BUT ANYTHING BESIDE THAT WE CLOSE THE NAVBAR
            if (!$(event.target).hasClass("form-control")) {
                $('#z').collapse('hide');
            }
        });
    };

这里还有我的导航条码：）

            <nav class="navbar navbar-default my-nav" data-spy="affix" id="nav" style="margin-bottom: 0">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#z" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">-</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="z">
                    <div class="navbar-form navbar-left my-navbar-left" role="search">
                        <div class="form-group">
                          <input id="searchbar" type="text" class="form-control" placeholder="Search for ads">
                        </div>
                    </div>
                    <ul class="nav navbar-nav navbar-right my-navbar-right">
                        <li><a class="tab-c tab-home"> <span class="text-to-icon">Posts</span> </a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

Answer 6

这很有效。当触摸移动触摸屏上的任何位置时，它将关闭折叠的导航栏。

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

Answer 7

$('.collapse').collapse('hide');

如何在点击正文时隐藏我的折叠bootstrap 3导航栏，崩溃是否可见？

7 个答案:

更新

这是另一种为我工作的方法。