Bootstrap 折叠组件在单击时未关闭菜单答案

【问题标题】：Bootstrap collapse component not closing menu on clicking awayBootstrap 折叠组件在单击时未关闭菜单
【发布时间】：2014-02-25 02:32:38
【问题描述】：

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

<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>

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

重现步骤：下载 bootstrap 3.0.3 zip 包，制作 index.html 文件，插入用于引导的 css 和 js 内容。输入上面的代码，点击或触摸离开时不关闭。

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

【问题讨论】：

“菜单不隐藏”是什么意思？你能说得更具体些吗
当您点击离开时，菜单应该会消失，对吧？
您的意思是下拉菜单或整个菜单。或者隐藏菜单的 3 行栏
wstaw.org/m/2014/02/01/plasma-desktopIq4999.png 这是一些下拉菜单的截图，图片中的下拉菜单是打开的，对吧？ - 所以，当我点击其他 HTML 元素时，即菜单边框的“外部”，菜单应该隐藏，就像在模态示例的情况下一样，我不明白为什么我不清楚？
你有解药吗：）？

标签： javascript html css twitter-bootstrap mobile

【解决方案1】：

我遇到了同样的问题，解决方案是确保不会多次引用 bootstrap.js。我在我的页面中加载了两次，这呈现了描述的问题。

    <script src="/js/bootstrap.min.js"></script>

不要多次加载！

【讨论】：

这对我有用，你能知道失败的原因吗？

【解决方案2】：

应该这样做

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

这是参考要点

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

【讨论】：

4 年后，这为我做到了！

【解决方案3】：

上面对我来说显示了一个奇怪的行为，有时导航上会出现滚动条。这可能来自一些花哨的 css，但下面为我修复了它。

$(document).on('click',function(e){
  if($('#bs-example-navbar-collapse-1').hasClass('in')){
    $('.collapse').collapse('hide'); 
  }
})

【讨论】：

【解决方案4】：

还有另一种解决方案here，它也适用于有子菜单。

<script>
$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
        $(this).collapse('hide');
    }
});
</script>

【讨论】：

【解决方案5】：

我遇到了同样的问题。不要使用脚本“hack”。尝试使用 jquery 2.1.4 或更早版本。

【讨论】：

这篇文章并不是回答问题的实际尝试。请注意Stack Overflow isn't a discussion forum，这是一个问答网站，每个帖子都是问题或问题的答案。帖子也可以有comments - 像这样的小句子 - 可用于批评或要求作者澄清。这应该是评论或new question。确保你ask a good question

【解决方案6】：

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

^ 我的 .js 文件太低了。将您的线条更改为如上所示，响应式按钮也应关闭菜单。

【讨论】：

【解决方案7】：

我在 jquery 和 css 文件之后有我的 Bootstrap.min.js 文件。我把它移到上面，它对我有用。

【讨论】：

【解决方案8】：

另外，我想指出；这个问题可能是由于在 HTML 文件中同时引用了bootstrap.js 和bootstrap.bundle.js 而导致的。如果您同时引用了bootstrap.js 和bootstrap.bundle.js，删除其中任何一个都可以解决此问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collapse Test Application</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>
    <div class="container mt-3">
        <h2>Simple Collapsible</h2>
        <a href="#demo" class="btn btn-primary" data-bs-toggle="collapse">Collapse</a>
        <div id="demo" class="collapse">Simple Collapsible</div>
    </div>

    <!-- Collapse will open but not close if you use both of the references below. -->
    <!-- Adding one of the following references to the project solves this problem. -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>

【讨论】：