Question

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

就在这里

问题是，

我想将Lorem / Ipsum更改为图像所以它就像关闭按钮，
图像1单击，手风琴打开+图像1变为图像2 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;
}

建议：为了获得更具响应性的互动，我建议您使用sprite sheet作为按钮状态图像，以便在第一次更改状态时没有明显的负载转换。

jsfiddle

手风琴与关闭按钮的图像

1 个答案: