如何让jQuery Accordion更清洁？

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>

看起来像这样（不包括New Ticket按钮）：

我现在希望手风琴标题看起来更像按钮：白色背景和黑色文字，但我有点迷失在我应该编辑/添加CSS的位置。

有人知道如何轻松改变这种手风琴的背景和文字颜色吗？欢迎所有提示！

Answer 1

您始终可以为特定DOM元素的子元素添加css样式。例如：

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

Demo

但这意味着您必须覆盖使用jqueryui获得的部分/全部默认优点。如果您只想将样式应用于特定元素，右键单击＆gt;检查元素以查看要重新设置的DOM标记的确切名称。

更新：移动span同样容易，see updated fiddle。

只做#accordion span { left:0; }可能足以达到您的目的。如果没有，请记住......

免责声明：我不建议像在小提琴中那样做。特别是这一行：

background-position: -36px -20px;

非常难以阅读，任何在不熟悉jQueryUI的样式主题的情况下查看CSS的人都会想知道你做了什么。一个更好的解决方案是直接用background-image替换span中的display:none;，或者甚至用{{1}}删除它们，然后放入自己的自定义图标。