SImple基於類的jQuery顯示/隱藏多個獨立實例？

Question

有沒有辦法使用只有類而不是ID的基於jQuery的顯示/隱藏許多實例（切換鏈接後面跟着帶有隱藏內容的容器;根據狀態切換文本更改）？我還沒有在任何地方找到合理的文檔記錄和功能性示例。感謝您的幫助！ --cg

Answer 1

喜歡的東西：

<div class="toggleset"> 
    <a class="toggler" href="#">Hide</a> 
    <div class="container"> 
    Data to show/hide 
    </div> 
</div> 

$('.toggler').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Hide" : "Show"); 
    evt.preventDefault(); 
}); 

你不需要外格，如果你使用next（），而不是兄弟姐妹，但它關係腳本更緊的標記。

Answer 2

非常感謝，Rob。效果很好！我已經成功地做起來很次要類可以控制切換文本是在這兩個州是什麼：

<script type="text/javascript"> 
<!-- 
$(document).ready(function() { 

$('.toggler.show').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Show less" : "Show more"); 
    $(this).toggleClass('active'); 
}) 

$('.toggler.read').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Read less" : "... Read more"); 
    $(this).toggleClass('active'); 
}) 
evt.preventDefault(); 
}); 
--> 
</script> 

我將如何利用jQuery的的「幻燈片」切換？我試圖改變

$container.toggle(); 

喜歡的東西

$container.slideToggle('fast'); 

但打破上的切換文本變化。 --cg