bootstrap close the drop down when clicked on another dropdown

Question

I have a bootstrap menu and in responsive mode, when I click on one menu item, it expands, but when I click on 2nd menu item, its submenu expands but 1st doesn't close.

Here is my menu

<ul class="clearfix">
    <li class="logo">
        <a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
            <img class="logo img-responsive logo_desktop" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
            <img class="logo img-responsive logo_mobile" src="{$logo_url|replace:'rdx-sports-1400756719.jpg':'logo_rdxsports.png'}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
        </a>
    </li>

    <li> <a class="dropdown-toggle" data-toggle="collapse" href="#menu" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-align-justify"></i></a> </li>
    <li> <a class="dropdown-toggle" data-toggle="collapse" href="#search" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-search"></i>  </a></li>
    <li><a class="dropdown-toggle" data-toggle="collapse" href="#language" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-globe"></i>  </a></li>
    <li><a class="dropdown-toggle" data-toggle="collapse" href="#account" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-user"></i>  </a></li>
    <li><a class="dropdown-toggle" id="trigger-cart-dropdown" data-toggle="collapse" href="#cart" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-shopping-cart"></i><span class="badge">0</span>  </a></li>
</ul>

Can you provide fiddle.. – Guruprasad J Rao Mar 16 '15 at 11:49 — Guruprasad J Rao, Mar 16 '15 at 11:49

score 1 · Accepted Answer · edited May 23 '17 at 12:23

Try adding this. Hope this is what you want!!

$( ".dropdown-submenu" ).click(function(event) {
    // stop bootstrap.js to hide the parents
    event.stopPropagation();
    // hide the open children
    $( this ).find(".dropdown-submenu").removeClass('open');
    // add 'open' class to all parents with class 'dropdown-submenu'
    $( this ).parents(".dropdown-submenu").addClass('open');
    // this is also open (or was)
    $( this ).toggleClass('open');
});

Or Try this EDIT: To take care of sub menus, make sure their toggle anchor has the dropdown-toggle class on it.

$(function () { 
        $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                $('.navbar-toggle:visible').click(); 
        }); 
});

Add support for phone touch.

$(function () {
        $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                $('.navbar-toggle:visible').click();
        });
});

SOURCE

bootstrap close the drop down when clicked on another dropdown

1 Answers1