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

Community
  • 1
  • 1
Johan
  • 7
  • 1
  • 1
  • 6

3 Answers3

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.

ryantdecker
  • 1,754
  • 13
  • 14
  • 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 '16 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 '16 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? – ryantdecker Jan 20 '16 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. – ryantdecker Jan 20 '16 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 '16 at 14:09
  • one big problem you have is that you have two iframes (nested inside each other) with the same ID attribute (ID's have to be unique). If you don't mind my asking, why are you using the iframes? is it solving some problem you were having? why not just have the navigation load a new file, or use jQuery .load() to load in the new file directly into the DOM instead? I think you will find a lot of the other complications (like the menu issue) will be much more straightforward without having so many iFrames in the mix. – ryantdecker Jan 23 '16 at 03:01
  • You are right, I removed the iframes and made new pages load every time when changing pages, and I got the click outside navbar-nav working :) So problem solved, thanks ryantdecker for you help figuring out what to do :) – Johan Jan 28 '16 at 09:38
  • Unfortunately the navbar is not fixed in mobile google chome after I removed the iframes, but thats another question :) – Johan Jan 28 '16 at 09:42
  • Glad it helped you get things working! As far as the chrome issues, If possible make sure you test on an actual device...sometimes the device emulator in chrome for developers is unpredictable and you may see 'issues' there that aren't really issues when you view from a real device. Good luck! – ryantdecker Jan 29 '16 at 02:49
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

krunal sabhadiya
  • 31
  • 5
0

Here the answer : 

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

Hope it's help :)

Remy

Rémy Testa
  • 897
  • 1
  • 11
  • 24
  • Thanks Remy, but I already tried that. The menu does not appear at all when I try this and click. – Johan Jan 19 '16 at 20:01