Question

我使用的是Jquery手风琴插件。我需要使用自己的标题图标，根据doc，我需要用背景图像创建css类。

所以我在我的css文件中这样做了。

.normal_arrow {
    background : url(../images/arrowonly.jpg);
}

.circle_arrow {
    background : url(../images/circle_arrow.jpg);
}

.circle_arrow_down {
    background : url(../images/circle_arrow_down.jpg);
}

然后在javascript中：

$("#accordion").accordion({
    header: "h3",
    clearStyle: true,
    autoHeight: false,
    icons: {
        header: "normal_arrow",
        headerSelected: "circle_arrow_down"               
    }
});

但没有出现箭头。

Answer 1

同样的问题，我不得不使用position：absolute;使图标容器占据宽度和高度。

.normal_arrow {
    background : url(../images/arrowonly.jpg);
    position: absolute;
    width: 10px;
    height: 10px
}

Answer 2

您的代码看起来是正确的。

尝试使用background-image:代替background:

还可以使用像Firebug这样的工具来确保亲戚路径在您认为的路径上。

Answer 3

使用!important：

.normal_arrow {
    background : url(../images/arrowonly.jpg) !important;
}

因为您需要覆盖默认样式。

Answer 4

在CSS中使用background-image和JavaScript，你需要将header和headerSelected放在引号中。

Answer 5

背景使用不正确。要渲染它可能要么使用

background-image: url(../images/circle_arrow.jpg);

或

background: transparent url(../images/circle_arrow.jpg) top left no-repeat;

Answer 6

注意：这仅适用于未使用任何jquery样式的用户。（即）你没有在文件中包含jquery的css。

CSS中的默认样式是：

.ui-icon { display: none; text-indent: -99999px; overflow: hidden; background-repeat:  no-repeat; }

因此，如果您设置一个带有背景图片，宽度和高度的div，但它仍然不会显示，因为上面的类。

将此内容添加到您的文档中：

<style type="text/css">
.ui-icon { display: block; }

</style>

Jquery手风琴插件

6 个答案: