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

Question

我有一个简单的 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 切换得很好，但触发文本/图像是静态的。

谢谢！

Answer 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';
    });
});

我给你做了一个演示