Page 1 of 1

Problem returns: Bootstrap menu stays open in collapsed mode

PostPosted: Mon Jan 09, 2017 1:16 pm
by pgielen
In october, I marked a question SOLVED about the bootstrap menu in condensed mode staying open after a click on a submenu item. But more problems turn up.

The original thread was here: http://www.kolor.com/forum/viewtopic.php?f=116&t=33810

The solution, which was posted by global moderator oblanc was to add a bit of code before the </body> tag in the tours html file. Like this:

Code: Select all
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.navbar li.dropdown li a').on('click',function(){
            jQuery('.navbar button[data-toggle]').click();
        });
    });
</script>


However, now that I am working on another site which also has a Bootstrap menu, but no submenus, the problem comes back.

A draft version of this tour can be found on http://vrnldev.panoworld.nl/vanhemert/

In this site, there are only 4 main menu items to be chosen from, no submenu items. In collapsed mode (when the screen width is reduced), I can click any of the 4 items and the corresponding pano loads, but the menu stays open. Needless to say, I added the code mentioned above, but that does not help. How to proceed?

Pierre

Re: Problem returns: Bootstrap menu stays open in collapsed

PostPosted: Mon Jan 09, 2017 1:53 pm
by oblanc
Hello
the selector is wrong try this
Code: Select all
jQuery('.navbar .navbar-collapse.collapse.in li a').on('click',function(){
    jQuery('.navbar button[data-toggle]').click();
});

Re: Problem returns: Bootstrap menu stays open in collapsed

PostPosted: Mon Jan 09, 2017 2:22 pm
by pgielen
I have implemented it in http://vrnldev.panoworld.nl/vanhemert/, but it still does not work.

Re: Problem returns: Bootstrap menu stays open in collapsed

PostPosted: Wed Jan 11, 2017 9:03 am
by pgielen
I just experimented a bit with the code and found out that changing "li.dropdown" into ".navbar-collapse.collapse.in" does not work. However, simply changing it to ".navbar-collapse" does.

So now mycode is:
Code: Select all
<script type="text/javascript">
         jQuery(document).ready(function(){      
            jQuery('.navbar .navbar-collapse li a').on('click',function(){
               jQuery('.navbar button[data-toggle]').click();
            });
         });
</script>

I just wonder why this does not work with submenus and we need two solutions. So, if submenus and no submenus are mixed, there will be a problem.

Pierre

Re: Problem returns: Bootstrap menu stays open in collapsed

PostPosted: Thu Mar 22, 2018 12:43 pm
by grismann
Hi Pierre,

I had the same problem. I figured it out editing the "bootstrap.mini.js" file.
I add this code ad the end of the javascript file:

Code: Select all
// MODIFICATION: Close responsive navbar automatically
  // ==============

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(".navbar-collapse").collapse('hide');
});


Some more extended answers:
https://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click
https://getbootstrap.com/docs/3.3/javascript/

I have not checked if it works with no submenus.

Ferran