Question

对于我决定转移到多列的下拉列表，我有一些奇怪的行为。

<!-- language-all: lang-html -->
<li class='dropdown'>
  <a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
  <ul class='dropdown-menu multi-column columns-3'>
    <div class='row'>
      <div class='col-sm-3'>
        <ul class='multi-column-dropdown'>
          <li class='disabled' disabled>Server 1</li>
          <li class='divider'></li>
          <li><a href='#tabl1' data-toggle='tab'>Report 1</a></li>
          <li><a href='#tabl2' data-toggle='tab'>Report 2</a></li>
        </ul>
      </div>
      <div class='col-sm-3'>
        <ul class='multi-column-dropdown'>
          <li class='disabled' disabled>Server 2</li>
          <li class='divider'></li>
          <li><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
        </ul>
      </div>
      <div class='col-sm-3'>
        <ul class='multi-column-dropdown'>
          <li class='disabled' disabled>Server 3</li>
          <li class='divider'></li>
          <li><a href='#tabl5' data-toggle='tab'>Report 5</a></li>
        </ul>
      </div>
    </div>
  </ul>
</li>

以下是示例：https://jsfiddle.net/Meeshka/0fazzvdh/9

第一次在下拉列表中选择每一行时，所有内容都像魅力一样。但是，试图回到报告3或5，我发现我无法做到这一点。在检查代码时，我看到虽然我切换到报告1或2，但上一个报告的li元素仍然是class =＆＃34; active＆＃34;。

<li class='active'><a href='#tabl3' data-toggle='tab'>Report 3</a></li>

仅当我在不同列中的报告之间切换时才会发生这种情况。同一下拉列中的报告正常工作。如果我在每列中添加至少2行，我可以设法切换但不是在100％情况下，行为是不可预测的。

就像在这个例子中一样：https://jsfiddle.net/Meeshka/0fazzvdh/1/

正确使用它的唯一方法是在切换到另一个元素时手动触发元素的类属性吗？它是一个完全错误还是我在代码中遗漏的东西？

Answer 1

到目前为止，我猜这个bug没有“正确”的解决方案。如果有人想要一个准备好的，非常直接的转发解决方案，这就是我解决它的方法：

    <script type='text/javascript'>
        $('a[data-toggle="tab"]').on('click', function(event) {
          $(this).closest('div.row').find('li').each(function(){
            //console.log($(this).attr('class'));
            $(this).removeClass('active');
          });
        });
    </script>

以下是小提琴的样子： https://jsfiddle.net/Meeshka/0fazzvdh/10/

Bootstrap多列下拉列表不会更改li类活动

1 个答案: