Bootstrap 3 dropdown in navbar immediately hides after toggle - show

Question

As demonstrated in this jsFiddle, I've a nav bar with 2 dropdowns. A link in the first drop down fires a JS click event where I manually show the second drop down. It works, except that after being shown, the second drop down automatically and immediately hides. I've added an alert to give you time to see the second dropdown before it hides.

http://jsfiddle.net/xNkS5/8/

Copy/paste of the JsFiddle code:

    <div class="container">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://toujoursplus.be/">Menu</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                   <a id="DropDown1" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 1 <b class="caret"></b></a>
                   <ul class="dropdown-menu">
                        <li><a id="SwitchLink">Switch to drop down 2</a></li>
                   </ul>
                </li>
                <li class="dropdown">
                   <a id="DropDown2" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 2 <b class="caret"></b></a>
                   <ul class="dropdown-menu">
                        <li><a href="#">Foo</a></li>
                        <li><a href="#">Bar</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

JavaScript

$(document).ready(function() {
        $("#SwitchLink").click(function(e) {
            e.preventDefault();// prevent the default anchor functionality
            $('#DropDown2').dropdown('toggle');
            alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
        });
    });

In case you wonder why I'm doing that: In our application the DropDown2 shows a login form. Sometimes, clicking the menu link in the DropDown1 should make the login form appear.

jQuery 1.9.1 - Bootstrap 3.0.0 Happens on both Chrome and Firefox.

I'm a Bootstrap newbie, and I'm convinced that I'm doing it wrong. Many thanks for your help. John.

Answer 1

Try this way:

Stop the event from propagating as well. Otherwise it causes the default dropdown handling of bootstrap from being executed which collapses all the dropdowns when you click on the link.

$(".SwitchLink").click(function(e) {
            e.preventDefault();
            e.stopPropagation();// prevent the default anchor functionality
            $('#DropDown2').dropdown('toggle');
            alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});

Fiddle

Answer 2

try to add this script on document.ready. wroked for me.

 $(function(){ $("[data-toggle=dropdown]").prop('onclick', null).off('click'); $("[data-toggle=dropdown]").click(function (e) { e.preventDefault(); e.stopPropagation(); let el = $(this); let expanded = el.attr("aria-expanded") || false; if (!expanded) { $(this).dropdown('toggle'); } }); });