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

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

把那一个镜头！

UPDATE（另一种方式来完成同样的事情）：

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