0

I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:

// menu buttons collapses when clicking a link
    $('document').ready(function() 
{
    if ($('a').on('click', function() 
            { 
                $('.collapse, #mainContainer').removeClass('in'); 
                $('.navbar-toggle').toggleClass('collapsed'); // button
            }));
});

but how to close menu by clicking outside the menu navbar?

here's my page that shows the problem iwebdesign.se

and yes i tried this already, not working:

similar question

2

3 Answers 3

2

Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:

$('body').click(function(event){
  // check if the clicked element is a descendent of navigation 
  if ($(event.target).closest('.navigation').length) {
    return; //do nothing if event target is within the navigation
  } else {
  // do something if the event target is outside the navigation
     // code for collapsing menu here...
  }
});

https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.

Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.

9
  • ryandecker > i tried your code and managed it to close it when i click, but only when i click on the navbar, maybe problem is because navbar is index.html and I have an iframe inside index.html that opens mainpage.html inside index.html
    – Johan
    Jan 20, 2016 at 15:48
  • code $(document).ready(function () { $(document).click(function (event) { var clickover = $(event.target); var _opened = $('.navbar-collapse').hasClass('collapse in'); if (_opened === true && !clickover.hasClass('navbar-toggle')) { alert('opened'); $('.collapse, #mainContainer').removeClass('in'); // menu buttons collapses and htmlpage fade in/out background fx runs $('.navbar-toggle').toggleClass('collapsed'); // button } }); });
    – Johan
    Jan 20, 2016 at 15:49
  • Can you add your html? It's impossible to know if the JS is correct without knowing the structure of the HTML. Happy to look closer but need more info to truly help you. Also, you are totally right that the iframe changes things -quite a bit actually. Are your iframes coming from the same domain as your main page? Jan 20, 2016 at 16:19
  • For what it's worth, on your site (linked in your question), I don't see any expanding happening with the nav...so I can't tell what the goal behavior is based on that. Jan 20, 2016 at 17:08
  • Thanks Ryan, I try to paste HTML but too long for comment I got the click function working but the menu closes only when i click navbar: i upload the new files to server $(document).click(function(event) { if($(event.target).is('#page_wrap, #wrap, img, #mainContainer, .container, #mainContainer.container, .col-lg-12, .col-lg-12.text-center, p.lead, div.jumbotron, div.navbar-header, h1')) { alert('clicked: ' + event.target.nodeName); $('.collapse, #mainContainer').removeClass('in'); $('.navbar-toggle').removeClass('in').addClass('collapsed'); }else{ return; } });
    – Johan
    Jan 21, 2016 at 14:09
2
  $(document).on('click',function(){
   $('.collapse').collapse('hide');
});

Just copy the code and past your custome script or index.html

thank's Remy click outside to hide bootstrap toggle menu close(hide) it

0

Here the answer :

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

Hope it's help :)

Remy

1
  • Thanks Remy, but I already tried that. The menu does not appear at all when I try this and click.
    – Johan
    Jan 19, 2016 at 20:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.