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/

またはslideToggleを使用

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

});