Bootstrap 折叠组件在单击时未关闭菜单
Posted
技术标签:
【中文标题】Bootstrap 折叠组件在单击时未关闭菜单【英文标题】：Bootstrap collapse component not closing menu on clicking away 【发布时间】：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" >
<img class="mobile-logo" src="img/logo-white.png" >
</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 元素时，即菜单边框的“外部”，菜单应该隐藏，就像在模态示例的情况下一样，我不明白为什么我不清楚？ 你有解药吗：）？ 【参考方案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>【讨论】：
以上是关于Bootstrap 折叠组件在单击时未关闭菜单的主要内容，如果未能解决你的问题，请参考以下文章
当用户在菜单外单击时，如何关闭 Bootstrap 导航栏下拉菜单？
在 Bootstrap 3 中单击导航栏元素外部时如何关闭打开的折叠导航栏？