CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user3501023
user3501023

Reputation: 23

Bootstrap dropdown menu+tab not functioning properly

I have a page where I am utilizing both the "dropdown" and "tabs" features of boostrap. Here's what my code looks like

<div class="dropdown" id="dropdown-tabs">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Select an Option <span class="caret"></span>
</a>
<ul class="dropdown-menu">
    <li class="active"><a href="#one" data-toggle="tab">Option 1</a></li>
<li><a href="#two" data-toggle="tab">Option 2</a></li>
<li><a href="#three" data-toggle="tab">Option 3</a></li>
</ul>
</div>

and the accompanying javascript(using jQuery v1.10.2)

$(function () {
$('#dropdown-tabs a').click(function (e) {
    e.preventDefault();
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
    $(this).parent().removeClass('active');
    })
});

Unfortunately, when a dropdown item is selected, the previously selected items do not "deselect" (i.e. the li style remains "active")

Here's what the problem looks like:

enter image description here

http://jsfiddle.net/alpineElephant/L9x4d/

I've been racking my brain over this very specific issue for about two hours now, scouring over google, stackoverflow, the boostrap documentation, and so on. Am I missing something really obvious here?

Upvotes: 2

Views: 1004

Answers (1)

T J
T J

Reputation: 43156

Add the following to your script:

$('.dropdown-menu a').click(function (e) {
    $('.active').removeClass('active');
});

JSFiddle

Upvotes: 2

Related Questions