如何同步 slideToggle() 元素，以便它们 expand/collapse 全部在一起，而不管当前状态如何？

Question

我正在尝试 show/hide 使用基于 classes 的触发器的部分。因此很容易在任何元素上触发 class，它会滑动切换 DOM.

中的下一个 show/hide 元素 class

第一部分工作正常。现在我正在向 expand/collapse ALL 元素添加一个触发器。问题是，我不知道如何同步它们的状态。

例如：我点击了 8 个元素中的 3 个，所以它们滑动打开并变得可见，其他 5 个仍然关闭......现在当我点击我的 expand/collapse all 触发器时，使用 slideToggle 只是切换它们状态，所以我最终关闭了 3 个，打开了 5 个。

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

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

这是我的代码：

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

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

还有一些低效的选择器，比如$( '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() 元素，以便它们 expand/collapse 全部在一起，而不管当前状态如何？

How to sync slideToggle() elements so they expand/collapse all together regardless of current state?

javascript

jquery

slidetoggle