引导多列下拉列表不会更改 li 类处于活动状态

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="active"。

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

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

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

正确使用它的唯一方法是在切换到另一个元素时手动触发元素的类属性吗？ 它到底是一个错误还是我在代码中错过了什么？

Answer 1

到目前为止，我想该错误没有"正确"的解决方案。 如果有人想要一个现成且非常直接的解决方案，以下是我解决它的方法：

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