循環點擊功能顯示和隱藏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(); 
});