jQuery open/close divのトグルを切り替える

Question

現在、3つのリンクを含むメニューがあります。これは、隠れたdivの関連性を開き、このjqueryコードを使用します（下記参照）。そのは「fooboxが」開いている場合は、元のdiv要素...

すなわちを開けた後、ユーザーがfooboxは「いつものように

$('#foo').toggle(function(){ 
$('#foobox').animate({marginLeft: '354'}, 1000); 
}, 
function(){ 
    $('#foobox').animate({marginLeft: '0'}, 1000); 
}); 

$('#foo2').toggle(function(){ 
$('#foo2box').animate({marginLeft: '354'}, 1000); 
}, 
function(){ 
    $('#foobox3').animate({marginLeft: '0'}, 1000); 
}); 

$('#foo3').toggle(function(){ 
$('#foobox3').animate({marginLeft: '354'}, 1000); 
}, 
function(){ 
    $('#foobox3').animate({marginLeft: '0'}, 1000); 
}); 

を閉じます」「foobox2」を開くには、「foo2は」をクリックする閉じること開いたあなたに感謝あらかじめ。

Answer 1

アクティブなものであることを示す新しいクラスを追加します。そしてあなたが何かを開くたびに、アクティブなものを閉じます。

$('#foo').toggle(function(){ 
    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active'); 
    $('#foobox').animate({marginLeft: '354'}, 1000).addClass('active'); 
    }, 
function(){ 
    $('#foobox').animate({marginLeft: '0'}, 1000).removeClass('active'); 
}); 

さらに、HTMLとjQueryを変更して1つのイベントハンドラだけを必要とすることをお勧めします。代わりに、この例の場合 ：

<div id="foo">Link</div> 
<div id="foobox">Content</div> 

<div id="foo2">Link</div> 
<div id="foobox2">Content</div> 

あなたが行うことができ、次のjQueryを使って

<div class="foo" data-target="1">Link</div> 
<div id="foobox-1">Content</div> 

<div class="foo" data-target="2">Link</div> 
<div id="foobox-2">Content</div> 

を：

$('.foo').toggle(function(){ 

    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active'); 
    $('#foobox-'+$(this).data('target')).animate({marginLeft: '354'}, 1000).addClass('active'); 

},function(){ 

    $('#foobox-'+$(this).data('target')).animate({marginLeft: '0'}, 1000).removeClass('active'); 

}); 

Answer 2

$('#foobox').animate({marginLeft: '354'}, 1000).data('open', true); 

データにあなたがdiv要素を開くたびに与えます、 divを開くたびに、他のすべてのdivに.data('open') == trueがあるかどうかを確認します。そうであれば、開いていることを意味します。そのデータ値を削除します。あなたが別のボックス、単に近くの$ opened_elementを開いたときに次に

$('#foobox').animate({marginLeft: '354'}, 1000); 
$opened_element = $('#foobox'); 

：

EDITは

また同様に、変数に開かれた要素を格納することができます。おそらく、それはあなたのコードを与えるグローバル変数でなければなりません。

Answer 3

私はあなたが話している機能は、すべてのfoo要素に追加http://docs.jquery.com/UI/Accordion

Answer 4

で覆われていると考えている（#foo、＃のfoo2は、＃のfoo3 ...）クラスfooの はまた、すべてのfoobox要素に追加します（ #foobox、＃のfoobox2、＃のfoobox3 ...）クラスfoobox 、これを使用します。その後、

$('.foo').live('click', function() { 
if (!$(this).next().is(':visible')) { 
$('.foobox').hide(); 
$(this).next().slideToggle(); 
if ($(this).next().is(':visible')) { 
    //DoSomething 
} 
} 
//DoSomething } 
}); 

Answer 5

使用例class="special"用などのクラスと現在を開く前に閉鎖を置くか、そのクラス上のアニメーションアクションを逆にするjQueryのを使用しますクラスを持つすべてのメニューが閉じられ、現在の1つのw開かれない。

$('.special').live('click',function(){ 
    $('#foo').toggle(function(){ 
     $('.special').animate({marginLeft: '0'}, 1000); 
     $('#foobox').animate({marginLeft: '354'}, 1000); 
    }, 
    function(){ 
     $('#foobox').animate({marginLeft: '0'}, 1000); 
    }); 

    $('#foo2').toggle(function(){ 
     $('.special').animate({marginLeft: '0'}, 1000); 
     $('#foo2box').animate({marginLeft: '354'}, 1000); 
    }, 
    function(){ 
     $('#foo2box').animate({marginLeft: '0'}, 1000); 
    }); 

    $('#foo3').toggle(function(){ 
     $('.special').animate({marginLeft: '0'}, 1000); 
     $('#foobox3').animate({marginLeft: '354'}, 1000); 
    }, 
    function(){ 
     $('#foobox3').animate({marginLeft: '0'}, 1000); 
    }); 
}); 

Example on JSFIDDLE.net