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

我将不胜感激任何帮助。我试图用引导程序做一些事情还不能完成吗？

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 ...

希望这有帮助。

Bootstrap tabbable btn-toolbar没有切换关闭

1 个答案: