jquery - 带有图像的 Accordion 作为开关按钮

Question

我有一个代码示例，它用于 Accordion

就在这里

http://jsfiddle.net/hDRMP/18/

问题是，

我想将 Lorem/Ipsum 转换为图像。
所以它会像开关按钮一样，
image1 点击， Accordion 打开 + image1 变成 image2.
image2 点击，accordion close + image2 变成image1

我对它做了一些修改。

CSS

.accordionButton a{
    display: inline-block;
    position: absolute;
    width: 44px;
    height: 44px;
    background:url(image1.png) 0 0 no-repeat;
    text-indent: -9999px;
    cursor:pointer;
    }
.on{
    background:url(image2.png) 0 0 no-repeat;
    float: left;
    cursor:pointer;
    }
.over{
    background:url(image1.png) 0 0 no-repeat;
    float: left;
    cursor:pointer;
    }

有人可以帮忙吗？
谢谢...

Answer 1

您可以通过从 accordionButton 容器中完全删除 a 元素并使用示例中显示的背景图像来实现此目的。然后您只需添加适当的 CSS 样式。

HTML

<div class="accordion">
    <div class="accordionButton"></div>
    <div class="accordionContent">
        ...
    </div>
    <div class="accordionButton"></div>
    <div class="accordionContent">
        ...
    </div>
</div>

CSS

.accordionButton, .accordionContent {
    text-align: center;
    width: 100%;
}
.accordionButton {
    width: 136px; /* height of the image used */
    height: 23px; /* width of the image used */
    margin: 0 auto;
    cursor: pointer;
    background: url(accordionbutton.png) no-repeat;
}
.accordionButton.over,
.accordionButton.on.over {
    background: url(accordionbutton_hover.png) no-repeat;
}
.accordionButton.on {
    background: url(accordionbutton_active.png) no-repeat;
}

建议:为了获得更具响应性的交互，我建议使用 sprite sheet对于按钮状态图像，以便在您第一次更改状态时不会出现明显的负载转换。

jsfiddle