CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapmobile
Damjan Dimitrioski
Damjan Dimitrioski

Reputation: 727

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 ?

Upvotes: 25

Views: 42884

Answers (9)

silent fighter
silent fighter

Reputation: 11

Another Thing that helped me was to just remove css link if it is used more than once just keep one bootstrap css cdn Hope that helps

Upvotes: 0

Sercan
Sercan

Reputation: 5081

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>

Upvotes: 6

Subrat Saxena
Subrat Saxena

Reputation: 78

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

Upvotes: 1

Oliver Edwards
Oliver Edwards

Reputation: 11

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

Upvotes: 1

glazsasha
glazsasha

Reputation: 21

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

Upvotes: -1

vt100
vt100

Reputation: 1003

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!

Upvotes: 62

Stanislav
Stanislav

Reputation: 2677

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>

Upvotes: 1

CleoR
CleoR

Reputation: 815

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'); 
  }
})

Upvotes: 1

winnyboy5
winnyboy5

Reputation: 1516

This should do

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

This is the reference gist

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

Upvotes: 21

Related Questions