如何使jQuery手風琴更清潔？

Question

使用jQuery UI，我像這樣創建了一個手風琴：

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
        heightStyle: "content"
    });
});

與此HTML：

<div id="accordion">
    <h5>First header</h5>
    <div class="some_class"></div>
    <h5>Second header</h5>
    <div class="some_other_class"></div>
</div>

如下所示（不包括“新票證”按鈕）：

現在，我希望手風琴標題看起來更像按鈕：白色背景和黑色文本，但是我有點迷失在應該編輯/添加CSS的位置。

有人知道我如何可以輕松地更改此手風琴的背景和文本顏色嗎？ 歡迎所有提示！

Answer 1

您始終可以僅為特定DOM元素的子代添加css樣式。 例如：

div#accordion h5 {
    ... custom styles ...
}

演示

但是，這確實意味着您必須覆蓋使用jqueryui獲得的部分/全部默認jqueryui 。 如果只想將樣式應用於特定元素，請右鍵單擊-> Inspect元素以查看要重新樣式化的DOM標記的確切名稱。

更新： span移動同樣容易， 請參見更新的小提琴 。

只做#accordion span { left:0; } #accordion span { left:0; }足以滿足您的目的。 如果沒有，請記住...

免責聲明：我不建議像小提琴一樣這樣做。 具體來說這行：

background-position: -36px -20px;

很難閱讀，任何不熟悉jQueryUI樣式主題的人在看您的CSS時都會想知道您做了什么。 更好的解決方案是用自定義樣式完全替換span的background-image ，或者甚至用display:none;擺脫它們display:none; 並放入您自己的自定義圖標。