使用图像切换多个 div答案

【问题标题】：Toggle multiple divs using images使用图像切换多个 div
【发布时间】：2013-03-27 22:49:56
【问题描述】：

我喜欢 Vytautas Butkus 对这个问题的解决方案（第二个答案在 jQuery hide and show toggle div with plus and minus icon 和一个演示 here）：

  $(".toggle").on("click", function(e){
    $(this).toggleClass("expanded");
    $content.slideToggle();
  });

但如果每页有多个 div，此代码会同时切换它们。其他解决方案接近我正在寻找的东西，但我喜欢这段代码使用图像，在切换时更改图像，并且不使用锚标签。如何修改此代码以使其功能相同但仅打开被单击的 div？提前致谢。

【问题讨论】：

标签： jquery image toggle

【解决方案1】：

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').toggle(function(){
       var that = $(this);
       $(this).next(".slidingDiv").slideDown(
         function(){
          that.text("-")
         }
       );
   },function(){
       var that = $(this);
       $(this).next(".slidingDiv").slideUp(
       function(){
          that.text("+")
       }
       );
   });
});

【讨论】：

【解决方案2】：

如果您的带有类切换的 div 和带有类内容的 div 分别彼此相邻，您可以使用 next()...

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

working fiddle here

【讨论】：

哦，是的，这就是我要找的！非常感谢。现在，冒着听起来忘恩负义的风险......有没有办法在带有类内容的 div 之后放置带有类切换的 div？我只是喜欢切换图像位于展开的 div 的底部。我在 html 中尝试了该顺序，然后使用“上一个”（只是猜测）而不是“下一个”，但这不起作用。
是的..应该可以工作.. :)...使用prev()而不是next()..无论如何欢迎...很高兴它有帮助...快乐编码..让我知道如果你对 prev() 有问题 :).. 给你.. 小提琴 prev jsfiddle.net/bipen/z7F75/49
啊，'prev' 不是 'previous'。知道了！这完美无缺。我要你休息一天。有偿。