Twitter Bootstrap Dropdown with Tabs inside

Question

I\'m trying to make a dropdown menu with tabs inside of it. The problem is the dropdown closes when I click a tab. See this demo: http://jsfiddle.net/timrpeterson/pv2Lc/2/.

Answer 1

The cited suggestion doesn't work because the .tab('show') method should be invoked on the actual tab (i.e., the link) instead of the tab pane.

So the code should be:

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

Here is an updated fiddle: http://jsfiddle.net/pv2Lc/6/

Answer 2

Use the specific bootstrap events : the hide.bs.dropdown (triggered when the dropdown is about to close) allows you to cancel the "hide" action by calling e.preventDefault(). (doc here, list of specific bootstrap events for scrolldown components)

You can activate a special flag when the user clicks on a tab, and check that flag in the hide.bs.dropdown event on the 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
(I added html ids to your example, change the selectors according to your needs)