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”的accordion元素的背景颜色更改为红色，我该怎么做？

我试过

$("#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给出的背景属性有一个似乎与它重叠的图像。所以你需要将backgroundcolor提供给这个类，而不是直接给div ..

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

修改

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

CHECK FIDDLE

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)' );

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

3 个答案: