Question

我喜欢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？提前谢谢。

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

如果你的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

2 个答案: