1

次のマークアップの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を使用して、アコーディオン要素の1つの背景色を変更するにはどうすればよいですか？たとえば、id = "1"のアコーディオン要素の背景色を赤に変更したい場合、どうすればよいですか？

やってみた

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

そしてそれは機能しませんでした。それから私は試しました

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

部分的には機能しますが、白のままの領域がたくさんあります（jsfiddleリンクを参照）

4

3 に答える 3

1

これを行うには、JqueryUICSSのクラスをオーバーライドする必要があります。

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

CSSによって与えられた背景属性には、それと重なっているように見える画像があるためです。したがって、divを直接ではなく、このクラスにbackgroundcolorを指定する必要があります。

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

編集

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

フィドルを確認してください

于 2012-10-19T00:41:21.970 に答える
1

$("#1").css('background','red');-背景は.ui-widget-content...で定義されているため、背景全体をオーバーライドする必要があります。そうしないと、background-imageが存在します

于 2012-10-19T00:50:08.880 に答える
0

問題は、アコーディオンウィジェットのクラス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)' );
于 2012-10-19T00:56:16.490 に答える