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

您需要将它们隐藏在您的click处理程序中：

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

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

jsFiddle

Answer 2

无需调用每个，这是多余的。此外，只需在打开一个新的 ..done 之前隐藏所有切换 :-)

$('.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 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