Question

有人可以帮我解决以下问题吗？无法做对。

我希望它在点击新/其他时关闭打开切换。

我现在有这个：

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

无需拨打每个电话，这是多余的。此外，只需在打开新的切换之前隐藏所有切换..完毕： - ）

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

如果其他打开，则关闭框关闭

3 个答案: