Question

循环点击功能的最简单方法是什么？

$('#botao-expandir').click(function () {
        $('#clipping-content').show();
        $(this).text('Reduzir');
        $(this).addClass('botao-reduzir');
        $('.botao-reduzir').click(function () {
            $('#clipping-content').hide();
            $(this).text('Expandir');
            $(this).removeClass('botao-reduzir');
        });
});

Answer 1

我觉得你可能会过分思考这一点。我不知道你是否想要制作动画，但是你正在寻找切换功能。

试试这个：

$('#botao-expandir').click(function(){ 
    $('#clipping-content').slideToggle(); 
});

试一试！

更新（完成同样事情的另一种方式）：

<script>
    .botao-hide {
     display:none;
     visibility:hidden;
     }
</script>

$('#botao-expandir').click(function(){ 
    $('#clipping-content').toggleClass("botao-hide"); 
});

Answer 2

对于无限循环，您可以使用setInterval函数，如下所示;

function fooloop() {
$('#botao-expandir').click(function () {
   $('#clipping-content').show();
   $(this).text('Reduzir');
   $(this).addClass('botao-reduzir');
   $('.botao-reduzir').click(function () {
        $('#clipping-content').hide();
        $(this).text('Expandir');
        $(this).removeClass('botao-reduzir');
     });
});
}
setInterval(fooloop, 2000);

编辑：好的，我看到更新的评论，然后建议你使用切换功能！

$('#botao-expandir').click(function(){ 
    $('#clipping-content').slideToggle(); 
});

循环点击功能显示和隐藏div

2 个答案: