[英]Twitter Bootstrap Dropdown with Tabs inside
我正在嘗試制作一個帶有標簽的下拉菜單。 問題是單擊選項卡時關閉下拉列表。 請參閱此演示: http : //jsfiddle.net/timrpeterson/pv2Lc/2/ 。 (代碼轉載如下)。
引用的關於制表符錨點上的stopPropagation()
建議似乎沒有幫助。 有沒有更好的辦法?
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css' rel="stylesheet" type="text/css"/>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a> </li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">HOME asdfasdfsda</div>
<div class="tab-pane" id="profile">PROFILE asdfafas</div>
<div class="tab-pane" id="messages">MESSAGES asdfdas</div>
</div>
</ul>
</div>
引用的建議不起作用,因為.tab('show')
方法應該在實際的選項卡(即鏈接)而不是選項卡窗格上調用。
所以代碼應該是:
$('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
e.stopPropagation()
$(this).tab('show')
})
這是一個更新的小提琴: http : //jsfiddle.net/pv2Lc/6/
使用特定的引導事件: hide.bs.dropdown
(在下拉列表即將關閉時觸發)允許您通過調用e.preventDefault()
來取消“隱藏”操作。 ( doc , scrolldown
組件的特定引導事件列表)
您可以在用戶單擊選項卡時激活特殊標志,並在下拉列表中的hide.bs.dropdown
事件中檢查該標志:
$('#myTabs').on('click', '.nav-tabs a', function(){
// set a special class on the '.dropdown' element
$(this).closest('.dropdown').addClass('dontClose');
})
$('#myDropDown').on('hide.bs.dropdown', function(e) {
if ( $(this).hasClass('dontClose') ){
e.preventDefault();
}
$(this).removeClass('dontClose');
});
小提琴
(我在你的例子中添加了html id,根據你的需要更改選擇器)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.