Javascript 单击时关闭下拉列表中的引导选项卡
您好,我有一个下拉列表,每当我单击其中的某些选项卡时,其中都有选项卡。它会关闭,但我单击的选项卡中的内容正在更改,因此它可以正常工作。但问题是它关闭了。我必须让它保持不变,这样用户就可以在不关闭的情况下单击每个选项卡,我使用javascript打开下拉列表并使用Javascript 单击时关闭下拉列表中的引导选项卡,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,您好,我有一个下拉列表,每当我单击其中的某些选项卡时,其中都有选项卡。它会关闭,但我单击的选项卡中的内容正在更改,因此它可以正常工作。但问题是它关闭了。我必须让它保持不变,这样用户就可以在不关闭的情况下单击每个选项卡,我使用javascript打开下拉列表并使用 e.stopPropagation() 选项卡#href正在工作,它没有关闭,但内容没有改变 这是我的密码 <nav class="navbar navbar-default"> <ul class="nav
e.stopPropagation()代码>
选项卡#href正在工作,它没有关闭,但内容没有改变
这是我的密码
<nav class="navbar navbar-default">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<ul class="nav nav-tabs animation" role="tablist" >
<li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
<li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
<li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
<li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
<li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
<li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content white-bg-tabs">
<div class="tab-pane active" id="cars" role="tabpanel">
00. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="vans" role="tabpanel">
0. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
1. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
2. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="mpv" role="tabpanel">
3. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="hybrid" role="tabpanel">
4. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="performance" role="tabpanel">
5. SOME ITEM w IMAGE / LIST HERE
</div>
</div>
<!-- container -->
</div>
</li>
</ul>
</nav>
我在这里找到了解决办法
按用户深度
$('.dropdown-menu').on('click.bs.dropdown', function (e) {
e.stopPropagation();
e.preventDefault();
}
$( document ).ready(function() {
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$('.dropdown-menu > ul > li > a').on('click', function(event){
event.stopPropagation();
$(this).tab('show')
});
});