Javascript 如何分别切换多个div的可见性

我有一系列切换div元素可见性的文本链接。文本链接的样式类似于按钮，当div可见或不可见时，文本将被更改

问题是，当按下第一个链接时，它会切换自己的div加上所有其他隐藏div的可见性，需要的是每个链接都会切换自己div的可见性

我的问题是，用一个函数解决这个问题的最好方法是什么。下面是我的代码。谢谢

代码也可以在此处进行测试：

HTML:

CSS:

---

接受两个回调的

toggle（）

版本已被弃用并删除，因此您必须改用click并执行类似操作

$(document).ready(function(){

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

   $('.show_hide').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $(self).text(function(_,txt) {
                    return txt == "Hide all" ? "See all" : "Hide all";
               });
           });
    });
});

---

请注意，仅使用类（ID必须是唯一的），并且页面上的

this

关键字ID必须是唯一的，因此第一步是纠正这一点。刚刚测试过，它满足了我的需要，但是当我单击任何按钮时，我被推到页面顶部，你知道为什么会发生这种情况吗？之所以会发生这种情况，是因为它们是以散列作为href的锚，而以散列作为href的锚就是这样做的，它们链接到“top”。将preventDefault（）添加到处理程序以使其停止，我将编辑答案。

$(document).ready(function(){

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

   $('.show_hide').toggle(function(){
       $(".slidingDiv").slideDown(
         function(){
           $("#plus").text("Hide all")
         }
       );
   },function(){
       $(".slidingDiv").slideUp(
       function(){
           $("#plus").text("See all")
       }
       );
   });
});

.show_hide {
  display: none;
}

$(document).ready(function(){

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

   $('.show_hide').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $(self).text(function(_,txt) {
                    return txt == "Hide all" ? "See all" : "Hide all";
               });
           });
    });
});