0

I have a site in development which is looking Ok, but I have a problem which only occurs with the collapsed menu, and only on the home page.

On the homepage there is a full width slideshow, if i try and navigate to a dropdown item, eg the gallery, the menu closes. It isn't an issue on any other page, and I am finding it difficult to debug.

http://test.forthwebsolutions.com

Craig Rushforth
  • 233
  • 4
  • 13

1 Answers1

1

This is a very common Twitter Bootstrap behavior using the data-toggle="dropdown".

To avoid this, the most simplest trick is - attach a click event handler on the internal dropdown menu and simply add event.stopPropagation(). Like so.

$('li.dropdown.inside-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

and obviously for that you need to also add the class that i mentioned above to the internal dropdown menus. For example:

<li class="dropdown inside-dropdown-menu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Galleries <i class="fa fa-angle-down"></i></a>
    <ul class="dropdown-menu open">
        <li><a href="/gallery.php">Image Gallery</a></li>
        <li><a href="/video_gallery.php">Video Gallery</a></li>
    </ul>
</li>

Additional Information : If your curious, there are alternative methods as well if you do not want to use event.stopPropagation() which is mentioned here in this SO thread

Community
  • 1
  • 1
Nikhil Nanjappa
  • 6,454
  • 3
  • 28
  • 44
  • Thanks for your reply, I have marked your answer as useful. It didn;t solve my problem however, so I looked through some backups and found the problem did not occur on an earlier version. For some reason, I had a block of js on my slideshow plugin which toggled the navbar-toggle class on clicking .nav a - i have commented this out and it is now working fine – Craig Rushforth Feb 10 '16 at 06:57