javascript - ナビゲーション バーの Bootstrap 3 ドロップダウンがトグル後にすぐに非表示になる - 表示

Question

この jsFiddle で示されているように、2 つのドロップダウンを持つナビゲーション バーがあります。最初のドロップダウンのリンクが JS クリック イベントを発生させ、2 番目のドロップダウンを手動で表示します。表示された後、2番目のドロップダウンが自動的にすぐに非表示になることを除いて、機能します。2 番目のドロップダウンが非表示になる前に表示する時間を与えるアラートを追加しました。

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

JsFiddle コードのコピー/貼り付け:

    <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.");
        });
    });

なぜ私がそうしているのか不思議に思われる方のために: 私たちのアプリケーションでは、DropDown2 はログイン フォームを表示します。DropDown1 のメニュー リンクをクリックすると、ログイン フォームが表示されることがあります。

jQuery 1.9.1 - Bootstrap 3.0.0 Chrome と Firefox の両方で発生します。

私は Bootstrap の初心者で、自分のやり方が間違っていると確信しています。助けてくれて本当にありがとうございます。ジョン。