Twitter Bootstrap Dropdown с вкладками внутри

Question

Я пытаюсь создать раскрывающееся меню с вкладками внутри него. Проблема заключается в том, что раскрывающийся список закрывается, когда я нажимаю вкладку. Смотрите эту демонстрационную версию: http://jsfiddle.net/timrpeterson/pv2Lc/2/. (код воспроизводится ниже).

cited suggestion to 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> 

Answer 1

Используйте конкретные бутстраповские события: hide.bs.dropdown (срабатывает, когда выпадающий собираются закрыть) позволяет отменить действие «скрыть», вызвав e.preventDefault(). (doc here, перечень конкретных бутстраповских событий для 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'); 
}); 

fiddle
(Я добавил идентификаторы html на ваш пример, смените селектора в соответствии с вашими потребностями)

Answer 2

Приведенные предложение не работает, так как метод .tab('show') должен быть вызван на вкладке фактической (т.е., по ссылке), а не на вкладке панели.

Поэтому код должен быть:

$('.dropdown-menu a[data-toggle="tab"]').click(function (e) { 
    e.stopPropagation()   
    $(this).tab('show') 
}) 

Вот обновленная скрипка: http://jsfiddle.net/pv2Lc/6/