如何分別切換多個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";
               });
           });
    });
});

小提琴

請注意，僅使用類（ID必須唯一）和this關鍵字