1

我在这里找到了这个 jquery 切换代码。现在我想添加一个垂直对齐到图像中间的文本“单击打开”。

这是代码：

CSS：

.toggle{
    display:inline-block;
    height:48px;
    width:48px;
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle.expanded{
    background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
}

jQuery：

$(document).ready(function(){
    var $content = $(".content").hide();
    $(".toggle").on("click", function(e){
        $(this).toggleClass("expanded");
        $content.slideToggle();
    });
});

HTML：

<div class="toggle"></div>
<div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

有什么想法吗？

4

2 回答 2

1

像这样？

添加:after伪元素来切换，以及一些行高。

.toggle:after{
    content:"Click to Open";
    display:block;
    height:48px;
    line-height:48px;
    width:88px;
    margin-left:48px;
}
.toggle.expanded:after{
     content:"Click to Close";
}

演示

或者试试这种方式：

html:

<div class="toggle">
  <span class="image"></span>
  <span class="text">Some Random text here. Hello</span>
</div>

CSS：

.toggle {
    height:48px;
    line-height:48px;
}
.toggle .image {
    vertical-align:middle;
    display:inline-block;
    height:48px;
    width:48px;
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle .text {
    margin-left : 10px;
}

演示

于 2013-10-01T01:33:05.687 回答
0

使 div.toggle 成为 img 而不是 div。将 src 属性设置为 CSS 中指定的背景图像。为 img 提供以下 CSS

vertical-align:middle;

给 div.content 一个内联显示。使用以下 JS

var $content = $(".content").hide();
 $(".toggle").on("click", function(e) {
    $(this).attr("src", "http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
    $content.slideToggle();
 });

问题是您要垂直对齐的文本太长，一旦创建换行符，换行符下方的任何文本都不会沿 img 的中心对齐。

查看新的 jsFiddle

于 2013-10-01T01:28:33.413 回答