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

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

代码如下：

CSS:

jQuery：

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

HTML:

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。

---

有什么想法吗？

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

vertical-align:middle; 

为div.content显示inline。使用以下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的中心对齐

---

请参见制作div。切换img而不是div。将src属性设置为CSS中指定的背景图像。为img提供以下CSS

vertical-align:middle; 

为div.content显示inline。使用以下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的中心对齐

看到这样的

了吗

添加

：在要切换的

伪元素之后，添加一些行高度

.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:

像这样吗

添加

：在要切换的

伪元素之后，添加一些行高度

.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:

---

像这样吗？我希望图片旁边的文字（右边）我感谢你的帮助。这是我希望它是（）的另一个示例，但我希望使用图像而不是符号+或-。（当我说垂直对齐时，我想这是令人困惑的）。你能帮助我吗？我很感激！这样地？我希望图片旁边的文字（右边）我感谢你的帮助。这是我希望它是（）的另一个示例，但我希望使用图像而不是符号+或-。（当我说垂直对齐时，我想这是令人困惑的）。你能帮助我吗？我很感激！嗨，兰斯，基本上我想要的是这样的：（）但是我将使用图像，而不是符号+或更少。有什么想法吗？谢谢。嗨，兰斯，基本上我想要的是这样的：（）但是我要用一个图像，而不是+或更少的符号。有什么想法吗？谢谢。问题是文本会有所不同。你能看一下这个吗：用图像代替符号（+/-）？非常感谢你的帮助，太好了！这正是我要找的。非常感谢：）问题是文本会有所不同。你能看一下这个吗：用图像代替符号（+/-）？非常感谢你的帮助，太好了！这正是我要找的。非常感谢：）

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