jquery - 如何为多个div“显示和隐藏带有切换按钮的内容”？

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;
    });
}

然后您可以为所有 div 调用注册切换事件

applytoggle('example1'); applytoggle('example2');

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