在运行时更改 KendoPanel 的颜色答案

【问题标题】：Change Color of KendoPanel at runtime在运行时更改 KendoPanel 的颜色
【发布时间】：2016-09-27 01:16:27
【问题描述】：

我正在使用 KendoPenel 显示一些数据，并希望在数据运行时扩展特定面板并更改其颜色。

我可以选择面板并使用以下代码展开它：

 function ExpandItemInPanelBar() {
        var panelBar = $("#KendoPanel3").data("kendoPanelBar");
        // I have set 0 in 'eq(0)' so it will expand first item you can change it as per your code
        panelBar.select(panelBar.element.children("li").eq(2));

        var item = panelBar.select();          
        panelBar.expand(item);
        item.addClass('myClass')   

    }

   .myClass
{
    background-color: red;
}

但是，尽管 item.addClass('myClass') 似乎生效了，因为当我将鼠标悬停在调试器中的 item 元素上时，它具有“添加了 MyClass”的类，但听起来好像没有正确更改背景颜色。我需要做一些特别的事情才能使该特定更改生效吗？

【问题讨论】：

尝试使用item.find("li").addClass('myClass')将其添加到相应的li
我试过了，但是好像不行
如果你想改变展开面板的颜色，你需要将该类添加到 li 内的 span 中，因为这是最前面的元素。

标签： jquery html css kendo-ui kendo-panelbar

【解决方案1】：

http://dojo.telerik.com/@Stephen/IXEfe

您需要使您的样式上的选择器更具体，以便它覆盖所有其他背景颜色规则，并且此选择器将取决于窗格的内容。

在我的示例中，我制作了样式选择器

ul.k-panelbar > li.myClass > div
{
  background-color: red; 
}

如果您只将样式添加到 li 元素（您的“项目”），则不会覆盖构成内容的 div 的背景。通过增加样式规则的特殊性，它将覆盖其他样式。

【讨论】：