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;
}

http://php.net/manual/en/function.usort.php

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

我在这里发现了类似的问题，但解决方案对我不起作用

小提琴： https://github.com/angular-ui/bootstrap/issues/3038

Answer 1

这是您问题的解决方案

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

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

将课程应用于＆＃39;手风琴组＆＃39;然后用css风格。

HTML

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

CSS

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

Render texture

设置背景颜色手风琴标题

3 个答案: