Bootstrap collapse component not closing menu on clicking away

Question

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 ?

What do you mean by "menu doesn't hide"? can you be more specific — winnyboy5, Feb 01 '14 at 09:38
You mean the dropdown or the entire menu. Or the 3 line bar that hides the menu — winnyboy5, Feb 01 '14 at 09:39
http://wstaw.org/m/2014/02/01/plasma-desktopIq4999.png this is a screenshot of some dropdown, the dropdown menu in the image is open, right ? - So, when I click on the other HTML elements i.e the "outside" the menu borders, the menu should hide, like in the case of modal example, I don't understand why I'm not clear ? — Damjan Dimitrioski, Feb 01 '14 at 09:43
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/46578/discussion-between-damjan-dimitrioski-and-winnyboy5) — Damjan Dimitrioski, Feb 01 '14 at 09:46

score 55 · Answer 1 · answered Sep 16 '15 at 12:13

55

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!

answered Sep 16 '15 at 12:13

vt100

923
1
11
21

4

This worked for me, could you be knowing the reason this fails? – Eugene Aug 03 '16 at 21:06

score 20 · Accepted Answer · answered Feb 01 '14 at 10:54

20

This should do

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

This is the reference gist

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

answered Feb 01 '14 at 10:54

winnyboy5

1,486
3
22
45

2

4 years later and this did it for me! – doriansm Nov 14 '18 at 16:08

Sercan · Answer 3 · 2022-02-10T06:30:18.007

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

Thank you for solving my problem but how did I end up with both files? — MortimerCat, Feb 05 '23 at 00:18

score 1 · Answer 4 · answered Apr 05 '15 at 23:56

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

score 1 · Answer 5 · edited May 23 '17 at 12:10

1

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>

edited May 23 '17 at 12:10

Community

1
1

answered Aug 12 '15 at 22:20

Stanislav

2,629
1
29
38

score 1 · Answer 6 · answered Sep 18 '17 at 21: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.

score 0 · Answer 7 · answered Mar 16 '19 at 21:50

0

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

answered Mar 16 '19 at 21:50

Subrat Saxena

68
1
9

score -1 · Answer 8 · answered Aug 05 '16 at 07:14

-1

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

answered Aug 05 '16 at 07:14

glazsasha

21
3

2

This post isn't an actual attempt at answering the question. Please note [Stack Overflow isn't a discussion forum](http://meta.stackexchange.com/q/92107/169503), it is a Q&A site where every post is either a question or an answer to a question. Posts can also have [comments](http://stackoverflow.com/help/privileges/comment) - small sentences like this one - that can be used to critique or request clarification from an author. This should be either a comment or a [new question](http://stackoverflow.com/questions/ask). Make sure you [ask a good question](http://stackoverflow.com/help/how-to-ask) – ddb Aug 05 '16 at 07:34

Bootstrap collapse component not closing menu on clicking away

8 Answers8

Linked