Bootstrap 折叠组件在单击离开时不关闭菜单

lzfw57am 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(8)|浏览(186)

当我点击离开菜单不隐藏，我发现这段代码：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文件。输入以上代码，点击或触摸离开时不会关闭。
那么代码是否意味着隐藏菜单？

twitter-bootstrap

来源：https://stackoverflow.com/questions/21496304/bootstrap-collapse-component-not-closing-menu-on-clicking-away

8条答案

按热度按时间

8aqjt8rx1#

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

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

不要加载超过一次！

赞(0）回复(0）举报 2023-10-14

bfrts1fy2#

这应该做

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

这是参考要点
https://gist.github.com/winnyboy5/8750551

赞(0）回复(0）举报 2023-10-14

6kkfgxo03#

此外，我想指出，这个问题可能是由于在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/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>

赞(0）回复(0）举报 2023-10-14

aydmsdu94#

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

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

赞(0）回复(0）举报 2023-10-14

0s0u357o5#

还有另一种解决方案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>

赞(0）回复(0）举报 2023-10-14

j91ykkif6#

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

^我把.js文件放得太低了。更改您的行看起来像上面和响应按钮也应该关闭菜单。

赞(0）回复(0）举报 2023-10-14

ubbxdtey7#

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

赞(0）回复(0）举报 2023-10-14

qcbq4gxm8#

我也有同样的问题。不要使用脚本“黑客”。请尝试使用jquery 2.1.4或更早版本。

赞(0）回复(0）举报 2023-10-14

我来回答

Bootstrap 折叠组件在单击离开时不关闭菜单

8条答案

相关问题

热门标签

最新问答