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

Question

我有一系列文本链接可以切换 div 元素的可见性。文本链接的样式看起来像按钮，当 div 可见或不可见时，文本会发生变化。

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

我的问题是仅使用一个函数解决此问题的最佳方法是什么。下面是我的代码。谢谢!

代码也可以在这里测试:

http://jsfiddle.net/Bradg/eBfxB/

HTML:

    <div>
        <a href="#" class="show_hide" id="plus">See all</a>
    </div>  

    <div class="slidingDiv" style="display: block;">

          <h2>Content One</h2>
    </div>

    <div>
        <a href="#" class="show_hide" id="plus">See all</a>
    </div>  

    <div class="slidingDiv" style="display: block;">

          <h2>Content Two</h2>
    </div>

JS:

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

CSS:

.show_hide {
  display: none;
}

Answer 1

接受两个回调的 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";
               });
           });
    });
});

FIDDLE

注意仅使用类(ID 必须是唯一的)和 this 关键字