在运行时更改KendoPanel的颜色

时间:2016-09-27 01:16:27

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

我使用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 added”类,但听起来好像没有正确更改背景颜色。我是否需要为特定的更改做些特别的事情才能生效?

1 个答案:

答案 0 :(得分:1)

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

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

在我的例子中,我制作了样式选择器

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

如果您只将样式添加到li元素(您的“item”),则不会覆盖构成内容的div的背景。通过增加样式规则的特异性,它将覆盖其他样式。