导航栏中的引导 3 下拉列表在切换 - 显示后立即隐藏

Bootstrap 3 dropdown in navbar immediately hides after toggle - show

本文关键字：显示 隐藏 下拉列表 导航      更新时间：2023-09-26

如这个jsFiddle所示，我有一个带有2个下拉列表的导航栏。第一个下拉列表中的链接触发了一个JS单击事件，我在其中手动显示第二个下拉列表。它可以工作，除了显示后，第二个下拉列表会自动立即隐藏。我添加了一个警报，让您有时间在隐藏第二个下拉列表之前查看它。

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 - 引导程序 3.0.0发生在Chrome和Firefox上。

我是 Bootstrap 新手，我确信我做错了。非常感谢您的帮助。John。

试试这个方式：

同时阻止事件传播。否则，它会导致执行引导程序的默认下拉列表处理，当您单击链接时，它会折叠所有下拉列表。

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

小提琴

尝试在document.ready上添加此脚本。

$(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');
        }
    });
});

相关文章：