CODEWITHSUNDEEP
jquerytwitter-bootstrapdrop-down-menu
William
William

Reputation: 101

How to hide a bootstrap opened collapsed menu after clicking elsewhere on page

I'm working on a bootstrap template and i need to hide/close an opened collapsed menu when someone clicks outside the menu. Here an image of the menu http://dev.flutechs.com/menu.png

Thanks

Upvotes: 5

Views: 8263

Answers (3)

Quackers the Duck
Quackers the Duck

Reputation: 1

I had 'collapse' applied to several div's on my page and once one of them had expanded its class changed to 'in' and not 'collapse' so using

$(document).on('click',function(){
    $('.in').collapse('hide'); //in instead of collapse
});

worked for me.

Upvotes: 0

Abdullah
Abdullah

Reputation: 182

Just add this script line and that's all.

 $(document).ready(function(){
    $('.dropdown-toggle').dropdown();
});

Upvotes: -1

Carol Skelly
Carol Skelly

Reputation: 362290

It depends on how the "collapsed menu" is being created.

If you use the standard Bootstrap dropdown menu, it will automatically close when elsewhere in the document is clicked...

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

If you're using the collapse component, you can create a document click handler using jQuery..

$(document).on('click',function(){
    $('.collapse').collapse('hide');
})

Demo on Bootply

Upvotes: 6

Related Questions