javascript - Bootstrap tabbable btn-toolbar 不切换

Question

我正在尝试使用 bootstrap 创建一个下拉切换开关，允许用户隐藏/取消隐藏某些 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 中的 Web 控制台进行调试，但没有看到问题所在。这也发生在 Chrome 和 IE 中。

我创建了一个 Bootstrap 片段来演示此处的行为:http://bootply.com/102355

如果有任何帮助，我将不胜感激。我是否正在尝试使用 bootstrap 做一些目前还无法完成的事情？

Answer 1

我不知道你是否解决了这个问题，但这是我使用 jQuery 的方法(我不知道 Bootstrap ):

$('.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 的 id(就像您在此处引用它一样 $('#myTab a').click (function (e)) 但我假设这就是您在 twitter-bootstrap 中定位标签的方式...

希望这对您有所帮助。