jquery - 使用图像切换多个 div

Question

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

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

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

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

Answer 2

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

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

在这里工作小提琴