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（ '例1'）; applytoggle（ '例2'）;

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

如何为多个div“显示和隐藏内容与切换按钮”？

1 个答案: