How to hide the open minimized boot menu after clicking elsewhere on the page

Question

I am working on a bootstrap template and I need to hide / close the open minimized menu when someone clicks outside the menu. Here is a picture of the menu http://dev.flutechs.com/menu.png

thanks

Answer 1

It depends on how the minimized menu is created.

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

<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 use the collapse component, you can create a document click handler using jQuery.

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

Bootply demo

Answer 2

I applied a “collapse” to several div elements on my page, and as soon as one of them expanded its class, changed to “in” and not “collapse”, therefore using

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

worked for me.

Answer 3

Just add this line to the script and that’s it.

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