'Bootstrap collapse component not closing menu on clicking away

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 ?

javascripthtmlcsstwitter-bootstrapmobile


Solution 1:[1]

I had the same problem and the solution was to make sure that bootstrap.js is not referenced more than once. I had it loaded two times in my page and this rendered described problem. 

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

Do not load it more than once!

Solution 2:[2]

The above displayed a weird behavior for me where sometimes a scroll bar would appear on the nav. That could be from some fancy css but the below fixed it for me.

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

Solution 3:[3]

There is another solution here, which also works when having sub-menus.

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

Solution 4:[4]

In addition, I would like to point out; this problem may be caused by reference to both bootstrap.js and bootstrap.bundle.js in the HTML file. If you are referencing both bootstrap.js and bootstrap.bundle.js, removing either one will solve this problem:

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

Solution 5:[5]

I had the same problem. Don't using script "hack". Just try to use jquery 2.1.4 or older.

Solution 6:[6]

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

^ I had the .js file too far down. Change your lines to look like the above and the responsive button should also close the menu.

Solution 7:[7]

I had my Bootstrap.min.js file after jquery and css files. i moved it above and it worked for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vt100
Solution 2 CleoR
Solution 3 Community
Solution 4
Solution 5 glazsasha
Solution 6 Oliver Edwards
Solution 7 Subrat Saxena

Related Questions