Bootstrap 折叠组件不会在单击时关闭菜单 [英] Bootstrap collapse component not closing menu on clicking away

问题描述

当我点击离开时菜单没有隐藏，我在以下位置找到了这段代码:http://getbootstrap.com/components/#navbar但不能正常工作.

<div class="container-fluid"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="index.php"><img class="desktop-logo" src="img/logo.png" alt="公司名称"><img class="mobile-logo" src="img/logo-white.png" width="169" alt=""></a>

<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class=""><a href="index.php">List</a></li></div><!--/.navbar-collapse --></div><!--/.container-fluid --></nav>

是的，我得到了:安装了正确的库:Bootstrap v3.0.3.没有 javascript 错误，HTML 代码有效.

重现步骤:下载 bootstrap 3.0.3 zip 包，制作一个 index.html 文件，插入 bootstrap 的 css 和 js 东西.输入上面的代码，点击或触摸不关闭.

那么代码是否意味着隐藏菜单?

解决方案

应该这样做

这是参考要点

https://gist.github.com/winnyboy5/8750551

When I click away the menu doesn't hide, I found this code at: http://getbootstrap.com/components/#navbar but doesn't work as it should.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="index.php">
        <img class="desktop-logo" src="img/logo.png" alt="Company title">
        <img class="mobile-logo" src="img/logo-white.png" width="169" alt="">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class=""><a href="index.php">List</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Yes, I got: proper libraries installed: Bootstrap v3.0.3. There are no javascript errors, and the HTML code is valid.

Steps to reproduce: Download the bootstrap 3.0.3 zip package, make an index.html file, insert the css and js stuff for bootstrap. Enter the above code, and it's not closing when click or touched away.

So is the code meant to hide the menu or not ?

解决方案

This should do

<script>
$(document).on('click',function(){
$('.collapse').collapse('hide');
})
</script> 

This is the reference gist

https://gist.github.com/winnyboy5/8750551

这篇关于Bootstrap 折叠组件不会在单击时关闭菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！