Question

我需要更改打开的父级的面板颜色。有人告诉我，我可以使用名为＆＃34; panel-class＆＃34;但我尝试使用if是不成功的。我直接从＆＃34;示例＆＃34;复制了示例代码。提供但仍然面板颜色不会改变。我试图在MVC _Layout.cshtml页面中使用它。这可能是原因吗？

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-sanitize.js"></script>
    <script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
    <script src="~/Scripts/app/app.js"></script>
    <script src="~/Scripts/app/AccordionCtrl.js"></script>
    <script src="~/Scripts/app/generalsearchService.js"></script>

</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">
            </div>
            <div class="float-right">
                <nav>
                </nav>
            </div>
        </div>
    </header>
    <div>

    </div>
    <div ng-app="myModule" ng-controller="AccordionCtrl">

        <script type="text/ng-template" id="group-template.html">
            <div class="panel {{panelClass || 'panel-default'}}">
                <div class="panel-heading">
                    <h4 class="panel-title" style="color:#fa39c3">
                        <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
                            <span ng-class="{'text-muted': isDisabled}">{{heading}}</span>
                        </a>
                    </h4>
                </div>
                <div class="panel-collapse collapse" collapse="!isOpen">
                    <div class="panel-body" style="text-align: right" ng-transclude></div>
                </div>
            </div>
        </script>

        <p>
            <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
            <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
        </p>

        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="oneAtATime">
                Open only one at a time
            </label>
        </div>
        <accordion close-others="oneAtATime">
            <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
                This content is straight in the template.
            </accordion-group>
            <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                {{group.content}}
            </accordion-group>
            <accordion-group heading="Dynamic Body Content">
                <p>The body of the accordion group grows to fit the contents</p>
                <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
                <div ng-repeat="item in items">{{item}}</div>
            </accordion-group>
            <accordion-group heading="Custom template" template-url="group-template.html">
                Hello
            </accordion-group>
            <accordion-group heading="Delete account" panel-class="panel-danger">
                <p>Please, to delete your account, click the button below</p>
                <button class="btn btn-danger">Delete</button>
            </accordion-group>
            <accordion-group is-open="status.open">
                <accordion-heading>
                    I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
                </accordion-heading>
                This is just some content to illustrate fancy headings.
            </accordion-group>
        </accordion>
    </div>
    <div id="myBody" style="margin-top:50px; margin-left:320px; width:80%; position:absolute">
        @RenderBody()
    </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)



</body>
</html>

以下是我运行时的样子：

正如您所看到的，文本颜色在一个示例中发生了变化，但面板颜色在＆＃34;删除＆＃34;标签。在此先感谢您的任何帮助。祝你有美好的一天！

Answer 1

我有你的答案，看看我的github页面： https://github.com/brendancopley/customDirectives/tree/master/custom-accordion-ui-bootstrap

以下是示例DEMO https://brendancopley.github.io/customDirectives/custom-accordion-ui-bootstrap/

我制作了UI-Bootstrap手风琴的自定义指令。

要回答你的问题，这很简单：

.panel.panel-open { 颜色：橙色 }

或者你可以为你的uib-accordion-group添加一个id，然后将它包含在css中，为你想要的每个标题打开时有不同的颜色。

<div uib-accordion-group id="anything" class="panel-white" is-open='menuStatus[2].isOpen'>
  <uib-accordion-heading>
    <i style="padding-right:10px;" class="pull-left glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[2].isOpen, 'glyphicon-chevron-up': !menuStatus[2].isOpen}"></i>Example Heading
  </uib-accordion-heading>
  <p>blah blah blah blah</p>
</div>

然后在你的CSS中添加这个

＃anything.panel.panel-open { 颜色：＃8f42f4; }

Answer 2

根据示例here，您可以看到Delete account手风琴使用panel-class属性来更改/覆盖默认类，而I can have markup, too!手风琴会显示如何使用ng-class根据手风琴是否开放来设置课程。

从此示例中打开Plunker或将其分叉并将panel-class属性从panel-danger更改为panel-success以查看更改。此外，您可以将glyphicon-chevron-down和glyphicon-chevron-right类更改为您自己的自定义类，它们将在打开或关闭时应用。

将来，在请求帮助之前，请仔细阅读文档和示例。根据SO自己的指导原则，表明您在寻求帮助之前尝试解决问题。

如何在面板打开时更改Angular UI Bootstrap面板颜色

2 个答案: