使用 jquery 切换 div 以及“展开/折叠”文本和图像答案

【问题标题】：toggling div as well as "expand/collapse" text and image with jquery使用 jquery 切换 div 以及“展开/折叠”文本和图像
【发布时间】：2010-06-16 14:33:33
【问题描述】：

我有一个简单的 jquery 用于切换 div 的可见性（如下）。我想添加的是一些文本和一个小加号图像，在 div 展开后会更改为不同的文本和一个减号图像。这是我的代码：

jQuery

$(document).ready(function(){
  $(".toggle").click(function(){
  $(".hidden").slideToggle("slow");
  });
});

html

// this will be changed to  Hide Panel <img src="minusSign.gif"> 
// and doesn't have to live in a <p>
<p class="toggle">Show Panel <img src="plusSign.gif"></p>
<div class="hidden">
Blah Blah Blah
</div>

css

.hidden {display:none;}

关于如何实现我正在寻找的任何建议？目前，div 切换正常，但触发文本/图像是静态的。

谢谢！

【问题讨论】：

标签： jquery image visibility swap

【解决方案1】：

我不禁注意到你需要这样的东西......

$(".toggle").click(function(){
    $(".hidden").slideToggle("slow");
    $(this).html(function(i,html) {
        if (html.indexOf('Show') != -1 ){
           html = html.replace('Show','Hide');
        } else {
           html = html.replace('Hide','Show');
        }
        return html;
    }).find('img').attr('src',function(i,src){
        return (src.indexOf('plusSign.gif') != -1)? 'minusSign.gif' : 'plusSign.gif';
    });
});

and I baked you a demo

【讨论】：