Home Ask Login Register

Developers Planet

Your answer is one click away!

Craig Rushforth February 2016

bootstrap 3, problems with collapsed menu over slideshow

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.



Nikhil Nanjappa February 2016

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

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>

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

Post Status

Asked in February 2016
Viewed 2,580 times
Voted 11
Answered 1 times


Leave an answer

Quote of the day: live life