【问题标题】:jQuery Next until current state hidden / show of child TR'sjQuery Next 直到当前状态隐藏/显示子 TR
【发布时间】:2020-07-31 14:07:17
【问题描述】:

大家好,我在表格上有一个 slideToggle() 函数,它使用 nextUntil 隐藏带有类标题的 tr 的所有子元素,这很好用。

但是我需要获取所有子 tr 的当前状态,以便确定它的子是隐藏还是可见 slideToggle / nextUntil 函数为所有子 tr 设置了一种显示样式,直到下一个 tr标题类(tr.header),但单独保留 td 元素。

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

如果您使用 slideToggle 显示或隐藏某些内容,可能有一种更简单的方法来确定单击?计划是使用状态值设置本地存储,以便当用户返回页面时,他们先前关闭或打开的元素保持状态。

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

        });

【问题讨论】:

    标签: jquery slidetoggle nextuntil


    【解决方案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;
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多