Jquery手风琴插件答案

【问题标题】：Jquery accordion pluginJquery手风琴插件
【发布时间】：2009-02-10 01:27:16
【问题描述】：

我正在使用 Jquery 手风琴插件。我需要使用自己的标题图标，根据文档，我需要创建带有背景图像的 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"               
    }
});

但没有出现箭头。

【问题讨论】：

我为您修复了您的代码。以后只需在每行代码前放置 4 个空格，就可以很好地显示其格式。

标签： jquery header icons accordion

【解决方案1】：

同样的问题，我不得不使用 position:absolute;使图标容器具有宽度和高度。

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

【讨论】：

【解决方案2】：

您的代码看起来正确。

尝试使用background-image: 而不是background:

还可以使用Firebug 之类的工具来绝对确保亲属路径朝着您认为的方向前进。

【讨论】：

【解决方案3】：

使用!important:

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

背景使用不正确。为此渲染可能使用

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

或

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

【讨论】：

【解决方案6】：

注意：这仅适用于不使用任何 jquery 样式的用户。 (ie) 你没有在文件中包含 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>

【讨论】：