选项卡内部的Bootstrap下拉列表不可见

Question

我有tabs，我在里面放了一个dropdown元素。问题是，下拉列表不可见。打开/关闭事件正在运行，但我没有看到列表。如果我将标签移到标签外面，它就可以了。发生了什么事？

的JavaScript

$(document).ready(function () {
    $('.tabs-student a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
});

HTML

<ul class="nav nav-tabs tabs-s">
  <li class="active"><a href="#tab-activity">A</a></li>
  <li class=""><a href="#tab-sales">B</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab-activity">
      <div class="btn-group left">
          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">test1
              <span class="caret caret-fix"></span>
           </button>
           <ul class="dropdown-menu class-list scrollable-menu center">
              <li><label id="1" class="link active">test1</label></li>
              <li><label id="2" class="link">test2</label></li>
           </ul>
       </div>
  </div>
  <div class="tab-pane" id="tab-sales">
     test
  </div>
</div>

Answer 1

我必须将overflow类中的.tab-content属性从hidden更改为在这种情况下visible

Answer 2

它应该可以在不覆盖overflow的{​​{1}}属性的情况下工作。我注意到的唯一另一件事是你正在为类.tab content初始化标签，但是你的标记中不存在该类。我认为这可能与您在tabs-student元素ul中的意图有关。当我改变它时，一切正常。

See this jsFiddle

此 JavaScript ：

.tabs-s

应该对应 HTML ：

$('.tabs-student a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

应该是这样的：