jquery - 手风琴与图像作为开关按钮

Question

我有一个代码示例，用于手风琴

就在这儿

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

问题是，

我想将 Lorem/Ipsum 更改为图像。
所以它就像打开关闭按钮，
点击 image1，手风琴打开 + image1 变成 image2。
image2 点击，手风琴关闭 + 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

您可以通过a从容器中完全删除元素accordionButton并使用示例中显示的背景图像来做到这一点。然后你只需要添加正确的 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;
}

建议：为了更具响应性的交互，我建议为按钮状态图像使用精灵表，这样当您第一次更改状态时就不会出现明显的负载转换。

jsfiddle