jquery - jQuery 显示/隐藏

Question

我正在尝试为显示/隐藏功能制作简单的 jquery 代码。但我仍然做错了什么。

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').show("slow");     
    });

    $('.arrow').click(function() {
        $('#box').hide("slow");
    }); 
    $('.arrow').click(function() {
        $('#box').show("slow");     
    }); 
});

http://jsfiddle.net/Armgh/

Answer 1

使用toggle：

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').toggle('slow');       
    }); 
});

http://jsfiddle.net/Armgh/1/

或者您可以保存您的状态并手动切换：

$(document).ready(function(){
    var hidden = false;
    $('.arrow').click(function() {
        if (hidden) {
            hidden = true;
            $('#box').hide("slow");
        } else {
            hidden = false;
            $('#box').show("slow");
        }
    });
});

http://jsfiddle.net/Armgh/

编辑

使用slideUp/ slideDown，你可以这样做：

$(document).ready(function(){
    var hidden = false;
    $('.arrow').click(function() {
        if (hidden) {
            hidden = false;
            $('#box').slideDown("slow");
        } else {
            hidden = true;
            $('#box').slideUp("slow");
        }
    });
});

http://jsfiddle.net/Armgh/3/

或使用幻灯片切换

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').slideToggle("slow");
    });
});

http://jsfiddle.net/Armgh/4/

Answer 2

您应该简单地使用 .toggle 功能：

$(document).ready(function(){

    $('.arrow').click(function() {
        $('#box').toggle("slow");     
    });

});

Answer 3

slow您也可以使用带有 [ , medium, fast] 参数的任何切换，

   $(document).ready(function(){
        $('.arrow').on('click', function() {
            $('#box').toggle("slow");  
        });
    });