的jQuery的slideToggle其中顯示/隱藏鏈接不同

Question

下面是我用一個漂亮的直線前進的slideToggle代碼（在本網站的其他地方找到）。

<script> 
    $(document).ready(function() { 
     $(".slidingDiv").hide(); 

     $('.show_hide').click(function (e) { 
      $(".slidingDiv").slideToggle("fast"); 
      e.preventDefault(); 
     }); 
    }); 
</script> 

HTML：

<div class="section-hold"> 
    <h4>Section</h4> 
    <p><a href="#" class="show_hide">find out more >></a></p>  
</div> 

<div class="slidingDiv">    
    <h4>My content.</p> 
</div> 

我想，雖然是當我點擊，顯示slidingDiv，我的「瞭解更多」鏈接消失，隱藏slidingDiv內容切換爲不同的鏈接，包含在該div本身。所以HTML會變成這樣的：

<div class="section-hold"> 
    <h4>Section</h4> 
    <p><a href="#" class="show">find out more >></a></p>   
</div> 

<div class="slidingDiv">    
    <h4>My content.</p> 
    <p><a href="#" class="hide">close this section</a></p> 
</div> 

任何想法，我怎麼能做到這一點？請注意，此頁面上還有幾個部分，因此理想情況下，代碼可以在頁面上多次重複使用。

我目前使用jQuery 1.11.0如果它的確與衆不同。

非常感謝。

Answer 1

這可能是你在找什麼。我已經對它進行了編碼，因此應該可以在同一頁面上重複使用。

首先（以幫助可重用性），包裝在另一個<div>你的HTML，所以你有：

<div class="sliderContainer"> 
    <div class="section-hold"> 
     <h4>Section</h4> 
     <p><a href="#" class="show">find out more >></a></p>   
    </div> 

    <div class="slidingDiv">    
     <h4>My content.</p> 
     <p><a href="#" class="hide">close this section</a></p> 
    </div> 
</div> 

然後，你需要一個函數來顯示.slidingDiv同時也隱藏.show鏈接，你有隻是點擊了。

$('.show').click(function (e) { 
    var slider = $(this).closest('.sliderContainer').find('.slidingDiv'); 
    slider.show('slide'); 
    $(this).hide(); 
    e.preventDefault(); 
}); 

這將使用額外<div>我加入，以便找到相關.slidingDiv這樣就可以安全地在其他地方在頁面上使用。

然後您需要一個功能來隱藏.slidingDiv，然後再次顯示.show鏈接。所以像這樣：

$('.hide').click(function (e) { 
    var slider = $(this).closest('.slidingDiv'); 
    slider.hide('slide'); 
    $('.show').show(); 
    e.preventDefault(); 
}); 

而且應該是這樣。這裏是工作代碼的的jsfiddle：http://jsfiddle.net/d9UeL/

希望有所幫助。