[英]Bootstrap 3 dropdown in navbar immediately hides after toggle - show
正如在这个jsFiddle中所展示的那样,我有一个带有2个下拉菜单的导航栏。 第一个下拉列表中的链接触发JS单击事件,我手动显示第二个下拉列表。 它可以工作,除了显示后,第二个自动下降并立即隐藏。 我添加了一个提醒,让你有时间看到它隐藏之前的第二个下拉列表。
复制/粘贴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新手,我确信我做错了。 非常感谢您的帮助。 约翰。
试试这种方式:
阻止事件传播。 否则,它会导致执行bootstrap的默认下拉处理,当您单击链接时会折叠所有下拉列表。
$(".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'); } }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.