jquery - 手风琴改变单个元素的颜色

Question

我有一个带有以下标记的 jQuery 手风琴

<div id="accordion">
    <div class="group" id="1">
        <div class="title">
            <a href="">Title 1</a></div>
        <div class="body">
            Body 1<br />
            <br />
            <form>
                Test <input type="text" /><br />
                <br />
                Test <input type="text" /><br />
                <br />
            </form>
        </div>
    </div>
    <div class="group" id="2">
        <div class="title">
            <a href="">Title 2</a></div>
        <div class="body">
            Body 2<br />
            <br />
            <form>
                Test <input type="text" /><br />
                <br />
                Test <input type="text" /><br />
                <br />
            </form>
        </div>
    </div>
</div>

我在这里包含了一个 jsfiddle

http://jsfiddle.net/nLHpR/

如何使用 javascript 更改手风琴元素之一的背景颜色？例如，如果我想将 id = "1" 的手风琴元素的背景颜色更改为红色，我该怎么做？

我试着做

$("#1").css('background-color','red');

它没有用。然后我尝试了

$("#1").children().css('background-color','red');

它部分有效，但有许多区域仍然是白色的（参见 jsfiddle 链接）

Answer 1

您需要覆盖 Jquery UI CSS 中的一个类来执行此操作，

#1 .ui-widget-content
{
    background: red !important;
}​

因为 CSS 给定的背景属性有一个似乎与它重叠的图像。所以你需要给这个类而不是直接给 div 的背景色..

$("#1 .ui-widget-content").css('background','red');

编辑

.ui-accordion-icons .ui-accordion-header a {
    background: orange !important;
}​

检查小提琴

Answer 2

$("#1").css('background','red');- 背景是在.ui-widget-content...中定义的，所以你应该覆盖整个背景，否则背景图像将存在

Answer 3

问题是来自手风琴小部件的类 ui-widget-content。这个班有

.ui-widget-content {
    border: 1px solid rgb(170, 170, 170);
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% rgb(255, 255, 255);
    color: rgb(34, 34, 34);
}

这是解决方案覆盖类并放置除背景之外的类的其他属性

$("#1").children(".body").removeClass("ui-widget-content");
$("#1").children("form").css('color','rgb(34, 34, 34)');
$("#1").children(".body").css('border', '1px solid rgb(170, 170, 170)' );