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

时间:2014-02-19 21:23:21

标签: jquery click

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

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

2 个答案:

答案 0 :(得分:0)

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

试试这个:

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

试一试!

更新(完成同样事情的另一种方式):

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

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

答案 1 :(得分:0)

对于无限循环,您可以使用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(); 
});