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/

或使用slideToggle

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

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