jQuery 接下来直到 child TR 的当前状态隐藏/显示

Question

大家好，我在 table 上有一个 slideToggle() 函数，它使用 nextUntil 隐藏 tr 的所有 child 元素，class 为 header，这很好用。

但我需要获取所有 child tr 的当前状态，以便确定其 children 是隐藏还是可见 slideToggle / nextUntil 函数设置显示样式 none 对于所有 child tr 到下一个具有 class 的 header (tr.header) 的 tr，但单独保留 td 元素。

所以我想如果我遍历 child 元素并检查 prop('nodeName') 我可以确定当前状态，即隐藏或显示 - 但我似乎无法让它工作。

可能有一种更简单的方法来确定点击时您是在使用 slideToggle 显示还是隐藏某些内容？计划是用状态值设置本地存储，这样当用户 returns 访问页面时，他们之前关闭或打开的元素会保持状态。

$('.header').click(function(){

            $(this).nextUntil('tr.header').slideToggle(300);

            var count = 0;
            $.each($(this).nextUntil('tr.header'),function(){
                
                if($(this).prop('nodeName')  == 'TR' && $(this).is(':visible')){
                     count++;  
                }
                
            })

            console.log(count);

            if (count>0){
                alert('its been opened');
            
            }
            else{

                alert('its been closed');
                
            }

        });

Answer 1

这个怎么样

let headerAnimationProcessing, headerState = false;
$('#header').click(function(){
    if( headerAnimationProcessing )
        return;

    headerAnimationProcessing = true;
    const $targets = $(this).nextUntil('tr.header');
    $targets[headerState ? 'slideUp' : 'slideDown' ](400, () => { headerAnimationProcessing = false; });
    headerState = !headerState;
});

jQuery 接下来直到 child TR 的当前状态隐藏/显示

jQuery Next until current state hidden / show of child TR's

jquery

slidetoggle

nextuntil