较少-混合附加到父级的类

Question

在某些情况下，我使用引导导航药丸作为引导程序可折叠的触发器。

这就是减少导航药的引导程序的样子（简化）

.nav-pills {
  > li {    
    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-pills-active-link-hover-color;
        background-color: @nav-pills-active-link-hover-bg;
      }
    }
  }
}

当可折叠对象折叠时，它将向触发器添加一个collapsed类（在这种情况下， .nav-pills > li元素）。 我所要做的，就是简单地应用.active类的导航药丸时，它不具有类.collapsed 。

我试着做

:not(.collapsed) { .active; }
:not(.collapsed) { &:extend(.active); }
:not(.collapsed) { &:extend(.active all); }

但是它们都不会有我想要的结果。 第一个甚至不会编译。

有没有办法做到这一点？

Answer 1

更新

@import (reference) "bower_components/bootstrap/less/bootstrap.less";

.nav-pills {
  > li > a:not(.collapsed) {
  &:extend(.nav-pills > li.active > a all);
}
}

输出：

.nav-pills > li > a:not(.collapsed),
.nav-pills > li > a:not(.collapsed):hover,
.nav-pills > li > a:not(.collapsed):focus {
  color: #ffffff;
  background-color: #337ab7;
}

似乎a:not(.collapsed) a没有class属性a情况下不匹配，因此您可以使用class="collapsed"初始化HTML：

<ul class="nav nav-pills">
  <li role="presentation"><a class="collapsed" data-toggle="collapse" data-parent="#tabs" href="#tab1">Tab 1</a></li>
  <li role="presentation"><a class="collapsed" data-toggle="collapse" data-parent="#tabs" href="#tab2">Tab 2</a></li>
  <li role="presentation"><a class="collapsed" data-toggle="collapse" data-parent="#tabs" href="#tab3">Tab 3</a></li>
</ul>

结束更新

我不确定我是否理解您的问题。 我认为您可以使用崩溃事件和jQuery：

$('#tabs').on('show.bs.collapse', function (event) 
{
  $('[href="#' + $(event.target).attr('id') + '"]').parent().addClass('active'); 
});
$('#tabs').on('hide.bs.collapse', function (event) 
{
  $('[href="#' + $(event.target).attr('id') + '"]').parent().removeClass('active'); 
});

演示： http ： //www.bootply.com/WvpaNi4LlZ