如何同步slideToggle()元素，使它们在一起展开/折叠，而不管当前状态如何？

Question

我试图使用基于类的触发器来显示/隐藏部分。因此，很容易将触发器类抛到任何元素上，并且它将在DOM中slideToggle下一个显示/隐藏元素类。

第一部分工作得很好。现在，我添加了一个触发器来展开/折叠所有元素。问题是，我不知道如何同步他们的状态。

例如:我单击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

只要有一个名为“open”的类就足以检测下一个div是打开还是关闭。因此，我编写了一个IF/ELSE块来决定是slideUp还是SlideDown。另外，当某些div被扩展时，您必须决定要做什么？您想要全部崩溃还是将其全部展开？我宁愿先崩溃。因此，我搜索一个opened one (使用数组长度)，如果我找到它，我折叠所有的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();        
    }

});

});