JQuery UI Accordion Widget显示多个图标

Question

我遇到了JQuery UI手风琴小部件的问题。我可以让手风琴工作，图标显示折叠和扩展的手风琴，但我得到所有的图标，而不仅仅是+/-图标。

崩溃时

扩展时

这是我的JQuery小部件的驱动程序

$(function () {
    $('.accordion').accordion({
        "header" : "h3",
        "icons": {
            "header": "ui-icon-plus",
            "activeHeader": "ui-icon-minus"
        },
        "heightStyle": "content",
        "collapsible": true,
        "active": false,
    });
});

这是在

上调用的HTML

<div class="accordion">
    <h3></h3><!--Left blank to show all the icons showing-->
    <div>
        <p>This is sample Content</p>
    </div>
</div>

我下载的JQuery-UI zip文件带有6个文件，其中包含所有可用的各种图标，看起来整行显示并向左移动以隐藏手风琴展开或折叠时的某些图标。我是否必须使用主题滚轮来滚动我自己的主题，并且只获取我想要的图标，或者是否需要在驱动程序中指定一些高度/宽度/偏移设置。我试图按照文档进行操作，但它并没有太大帮助。

Answer 1

事实证明，JQuery UI css之间存在css冲突

.ui-icon {
    width: 16px;
    height: 16px;
}

和我用于网站其他部分的一些CSS

.content span {
    color : #B47000;
    font-size : 1.25em;
    width : 100%;
}

由于<div class="accordion">嵌套在<div class="content">内，.content span的css覆盖了.ui-icon css，因为JQuery UI会在标头元素中插入<span class="ui-icon ui-icon-plus">来保留图标。

我将我的css更改为更独特，并解决了这个问题。

/*Adding > fixed the error*/
.content > span {
    color : #B47000;
    font-size : 1.25em;
    width : 100%;
}