设置背景颜色手风琴标题

Question

我想根据列表中当前项目的状态更改手风琴的颜色。

我想使用ng-class="{status: item.status}" 之类的东西（我有testClass: true）

现在的问题是我无法设置整个手风琴标题的颜色。

<accordion>
    <accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
        <accordion-heading>
            <div ng-class="{testClass: true}">
                <p>Test</p>
            </div>
        </accordion-heading>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="text-content font-size-14">{{item.text}}</div>
                </div>
            </div>
        </div>
    </accordion-group>
</accordion>

CSS

.testClass {
background-color: burlywood;
}

知道如何解决这个问题吗？

我在这里发现了类似的问题，但解决方案对我不起作用 https://github.com/angular-ui/bootstrap/issues/3038

小提琴： http://jsfiddle.net/f8ce1b0w/2/

Answer 1

将类应用于“手风琴组”，然后使用 css 设置样式。

HTML

<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">

CSS

.panel {
  &.test {
    & > .panel-heading {
      background-color: red;
    }
  } 
}

http://jsfiddle.net/BramG/f8ce1b0w/8/

Answer 2

您需要在层次结构中将应用的类移到更高的位置：

http://jsfiddle.net/f8ce1b0w/7/

那么你的 css 将如下所示：

.panel-warning .panel-heading {
  //customize your css here
}

问题是您将测试项目放置在带有填充的项目中。相反，将 test-item-class 放在更高的位置，然后使用 css 来定位项目。

如果您的状态将与 Bootstrap 状态匹配，那么您可能需要此处的验证类名称：https://getbootstrap.com/docs/4.0/migration/#panels （面板成功，面板信息，面板警告，面板危险）

这些类名已经在你的 Bootstrap css 中了。

Answer 3

这就是你的问题的解决方案

.test{
  background-color: red;
}

 .test-parent.panel-default > .panel-heading {
    background-color:red;
}

<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
        <accordion-heading>
         <div class="test">
          I can have markup, too!
          </div>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
      </accordion-group>