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

Question

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

Answer 1

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