时间戳

首页 > 解决方案 > Bootstrap 多列下拉菜单不会改变 li 类活动

drop-down-menu - Bootstrap 多列下拉菜单不会改变 li 类活动

问题描述

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

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

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

标签： drop-down-menumultiple-columns

解决方案

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

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

推荐阅读