jquery - jqueryクローズトグル

Question

同じdiv（実際には私のページのiframe）を切り替える複数のボタンがあります。別のボタンをクリックしたときに「再トグル」したいのですが、同じボタンをもう一度クリックしたときに、divを閉じたいだけです。

JSFIDDLE

$(document).ready(function(){
    $('.leftbutton').click(function(){
        if($('#left').is(':visible')) return ; // ignoring
        $('#right').hide();
        $('#left').fadeIn();
    });
});

$(document).ready(function(){
    $('.rightbutton').click(function(){
        if($('#right').is(':visible')){
            $('#right').fadeOut();
            $('#right').fadeIn();
        } 
        else{
            $('#left').hide();
            $('#right').fadeIn();
        }
    });
});

Answer 1

あなたができることは、ターゲット要素の一部としてクリックされた最後のボタンを保存することです。例えば：

$(".rightbutton").on('click', function () {
   $("#right").data('lastClicked', this);

次に、最後にクリックしたデータをと比較してthis、ボタンを表示するかどうかを確認します。

http://jsfiddle.net/CfGYG/10/

Answer 2

もう一度クリックして左を閉じるには、関数に戻る代わりに、左を非表示にするだけです。これと同じ概念を適切なボタンに適用できます。

$('.leftbutton').click(function(){
    if($('#left').is(':visible'))
    {
        $("#left").hide("slide");;
        return;
    }
    $('#right').hide();
    $('#left').fadeIn();
});

http://jsfiddle.net/CfGYG/11/

Answer 3

両方の答えは役に立ちました、そしてそれを組み合わせると私が望むすべての機能が得られました。

このjsfiddleをチェックしてください：http：//jsfiddle.net/thomascs/nV5Tu/

$(document).ready(function(){
    $('.leftbutton').click(function(){
        if($('#left').is(':visible')) {
            $('#left').hide();
        }
        else {
        $('#right').hide();
        $('#left').fadeIn();
        }
    });
});

$(document).ready(function(){
    $('.rightbutton').click(function() {
        if ($('#right').is(':visible')) {
              $('#right').fadeOut();
            if ($("#right").data('lastClicked') !== this) {
               $('#right').fadeIn();
            }
        } 
        else {
            $('#left').hide();
            $('#right').fadeIn();
        }
        $("#right").data('lastClicked', this);
    });
});

ご協力いただきありがとうございます！