Bootstrap tabbable btn-toolbar not toggling off

Question

Я пытаюсь использовать бутстрап для создания переключателя выпадающего списка, который позволяет пользователю скрывать/отображать определенные разделы div. Код показан ниже:

<div class="tabbable"> 
    <div class="btn-toolbar"> 
     <div class="btn-group"> 
     <a class="btn dropdown-toggle input-large" data-toggle="dropdown" href="#"> 
       Select an Area by: 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li class="active"><a data-toggle="tab" href="#Parish">Parish</a></li> 
      <li><a data-toggle="tab" href="#Area">MLS Area</a></li> 
      <li><a data-toggle="tab" href="#City">City</a></li> 
      <li><a data-toggle="tab" href="#Zip">Zip</a></li> 
     </ul> 
     </div> <!-- /btn-group --> 
    </div> <!-- /btn-toolbar --> 

    <div class="tab-content"> 
     <div class="tab-pane active" id="Parish"> 
     Parish 
     </div> 
     <div class="tab-pane" id="Area"> 
      Area 
     </div> 
     <div class="tab-pane" id="City"> 
      City 
     </div> 
     <div class="tab-pane" id="Zip"> 
      Zip 
     </div> 
    </div> 

Он работает (вид), за исключением того, что после выбора значения параметра в первый раз, он никогда не переключает прочь после выбора нового элемента, за исключением. Это также не позволяет мне вернуться к элементу, который уже выбран. Я искал везде и использовал веб-консоль в Firefox для отладки, но не понимаю, в чем проблема. Это происходит и в Chrome и в IE.

Я создал фрагмент Bootstrap, который демонстрирует поведение здесь: http://bootply.com/102355

Я был бы признателен за любую помощь. Я пытаюсь что-то сделать с помощью бутстрапа, которого еще нельзя сделать?

Answer 1

Я не знаю, если вы решили эту проблему, но здесь, как я хотел бы сделать это с помощью JQuery (я не знаю самозагрузки):

$('.dropdown-menu li a').click(function(){ 
    DeselectCurrent(); 
}); 


var DeselectCurrent = function() { 
    jQuery('.dropdown-menu li').each(function(){ 
     var attr = jQuery(this).attr('class');    

     if (typeof attr !== 'undefined' && attr !== false) { 
      jQuery(this).removeClass("active"); 
     } 
    }); 
}; 

Вот это рабочий пример: http://bootply.com/102465

Кстати, в моем примере я назвал свою функцию DeselectCurrent ... Было бы разумнее, если бы вы назвали ее DeselectPrevious.

Просто примечание стороны, я не вижу в разметке идентификатор со значением myTab (как вы ссылаетесь его здесь $('#myTab a').click(function (e)), но я предполагаю, что, как вы нацелить ваши вкладки в твиттер-загрузчике ...

Надеюсь, это поможет.