javascript - 他が開いたらトグルボックスを閉じる

Question

誰かが次のコードで私を助けることができますか? それを正しくすることはできません。

新しい/他のものをクリックすると、開いているトグルを閉じるようにします。

私は現時点でこれを持っています：

http://jsfiddle.net/78tDj/1/

jQuery(document).ready(function($) { 

    // Find the toggles and hide their content
    $('.toggle').each(function(){
        $(this).find('.toggle-content').hide();
    });

    // When a toggle is clicked (activated) show their content
    $('.toggle a.toggle-trigger').click(function(){
        var el = $(this), parent = el.closest('.toggle');

        if( el.hasClass('active') )
        {
            parent.find('.toggle-content').slideToggle();
            el.removeClass('active');
        }
        else
        {
            parent.find('.toggle-content').slideToggle();
            el.addClass('active');
        }
        return false;
    });

});  //End

Answer 1

それぞれを呼び出す必要はありません。冗長です。また、新しいトグルを開く前に、すべてのトグルを非表示にするだけです..完了:-)

$('.toggle a.toggle-trigger').click(function() {                
    var el     = $(this),
        parent = el.closest('.toggle');

    $('.toggle .toggle-content').slideUp();

    if (!el.hasClass('active')) {
        $('.toggle a.toggle-trigger').removeClass('active');

        el.addClass('active');
        parent.find('.toggle-content').slideDown();
    }
    else {
        el.removeClass('active');
    }
});

http://jsfiddle.net/78tDj/10/

Answer 2

clickハンドラーでそれらを非表示にする必要があります。

$('.toggle a.toggle-trigger').click(function(){
    var el = $(this), parent = el.closest('.toggle');

    $('.toggle .toggle-content').slideUp(); // <- added this!!!!
    //...

jsフィドル

Answer 3

これはあなたが達成したいことですか？

jQuery(document).ready(function($) { 

    // Find the toggles and hide their content
    $('.toggle-content').hide();

    // When a toggle is clicked (activated) show their content
    $('.toggle a.toggle-trigger').click(function(){
        var el = $(this), parent = el.closest('.toggle');


        $('.toggle-content').hide();

        if( el.hasClass('active') )
        {
            parent.find('.toggle-content').slideToggle();
            el.removeClass('active');
        }
        else
        {
            parent.find('.toggle-content').slideToggle();
            el.addClass('active');
        }
        return false;
    });

});  //End