jQuery 切换显示/隐藏图像加文本

Question

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

这是代码:

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>

有什么想法吗？

Answer 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";
}

Demo

或者这样试试:

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;
}

Demo