Question

我正在尝试使用基于类的触发器来显示/隐藏部分。所以很容易在任何元素上抛出触发器类，它将滑动切换DOM中的下一个show / hide元素类。

第一部分工作正常。现在我添加一个触发器来展开/折叠所有元素。麻烦的是，我无法弄清楚如何同步他们的状态。

例如：我单击8个元素中的3个，这样它们就会滑动打开并变得可见，其他5个仍然关闭...现在当我单击我的展开/折叠所有触发器时，使用slideToggle只是切换它们的状态，所以我结束3关闭和5开。

无论当前状态如何，我如何让状态同步？

我一直试图找出条件来检查触发器上是否有打开或关闭的类，然后切换下一个元素，但到目前为止我只是弄得一团糟。

这是我的代码：

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

    // The element to hide/reveal
    $( '.bodhi-hide-reveal' ).hide();

    // The trigger to hide/reveal
    $( '.bodhi-reveal-trigger' ).click( function( e ) {

        e.preventDefault();

        // Target only the next element to hide/reveal and toggle it
        $( this ).next( '.bodhi-hide-reveal' ).slideToggle();

        // Toggle the trigger class
        $( '.bodhi-reveal-trigger' ).toggleClass( 'opened closed' );

    });

    // Expand/collapse all button
    $( '.expand-collapse-all' ).click( function( e ) {

        e.preventDefault();

        // Find all hide/reveal elements and toggle them all together
        $( 'body' ).find( '.bodhi-hide-reveal' ).slideToggle();

    });

});

Answer 1

只需一个名为“已打开”的类就足以检测下一个div是打开还是关闭。所以我编写了一个IF / ELSE块来决定是否使用slideUp或SlideDown。另外你必须决定在扩展某些div时你会做什么？你想要全部折叠还是全部展开？我宁愿先崩溃。所以我搜索找到opened一个（使用数组长度），如果我找到它，我会折叠所有div，在其他地方我扩展所有：

还有一些效率低下的选择器，如$( 'body' ).find()。我也用有效的选择器替换那些选择器：

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

// The element to hide/reveal
$('.bodhi-hide-reveal').hide();
$('.bodhi-reveal-trigger').removeClass("opened");

// The trigger to hide/reveal
$('.bodhi-reveal-trigger').click( function( e ) {

    e.preventDefault();

    // Target only the next element to hide/reveal and toggle it
    $(this).next('.bodhi-hide-reveal').slideToggle();

    // Toggle the trigger class
    $(this).toggleClass('opened');

});

// Expand/collapse all button
$('.expand-collapse-all').click( function( e ) {

    e.preventDefault();

    //Check if there is at least one open div:

    if ($('.bodhi-reveal-trigger.opened').length){
        $('.bodhi-reveal-trigger').removeClass("opened")
        $('.bodhi-hide-reveal').stop().slideUp();
    }

    else {
        $('.bodhi-reveal-trigger').addClass("opened")
        $('.bodhi-hide-reveal').stop().slideDown();        
    }

});

});

如何同步slideToggle（）元素，以便它们一起展开/折叠，而不管当前状态如何？

1 个答案: