如何为多个div "Show & Hide Content with Toggle Button"？

Question

我正在尝试为多个div创建切换按钮。我找到了一个很好的教程，分享下面的代码:

<script type="text/javascript">
$(document).ready(function(){   
$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
    $('a#toggle-example2').click(function() {
        $('.example2').slideToggle(1000);
        return false;
    });
});
</script>

如何更改多个div类的代码，如。example2，。example3， ....

下面是教程:http://rpardz.com/blog/show-hide-content-jquery-tutorial/

Answer 1

如果你已经知道div类，那么你可以把下面的代码写在一个单独的函数中:

    function applytoggle(divclass) {
    var linkId = 'toggle-'+divclass; 
    $('.'+divclass).hide();
    $('.'+divclass).before('<a href="#" id="'+linkId+'" class="button">Open/Close</a>');
    $('a#toggle-' + divclass).live('click', function () {
        $('.'+divclass).slideToggle(1000);
        return false;
    });
}

那么你可以调用register toggle events为所有div作为

applytoggle(例二);applytoggle (example2);

编辑:提琴http://jsfiddle.net/QLGwr/6/