jQuery slideToggle 显示类型

Posted 2023-02-25

【中文标题】jQuery slideToggle 显示类型

【英文标题】：JQuery slideToggle display type

【发布时间】：2009-08-12 13:37:28

【问题描述】：

我正在使用 jQuery slideToggle 来显示隐藏的表格行，但它将显示样式设置为阻止，我需要显示表格行。有什么想法我可以做到这一点吗？

提前致谢

【参考方案1】：

我想出了解决这个问题的方法 - 检查显示是否已设置为阻止（如果元素已切换为显示），如果设置为所需的显示类型。

$('a.btn').on('click', function() 
    $('div.myDiv').slideToggle(200, function() 
        if ($(this).css('display') == 'block') $(this).css('display', 'table-row'); // enter desired display type
    );
);

【讨论】：

注意问题，他问如何将内联样式设置为 table-row ，而不是 inline-block -1

@redsquare 请注意我的代码 - 注释部分显示“输入所需的显示类型”。对这个问题的唯一有效解决方案投反对票是很弱的。

无法下载满足问题的我的...无论如何都支持你

@redsquare 谢谢，我很感激。我拒绝你的原因是因为我真的尝试过。您的答案的问题是slidetoggle() 显示并隐藏，但是通过您的修改，它无法隐藏。

【参考方案2】：

inorganik 的解决方案几乎奏效了。但是您还需要设置step 回调以将block 更改为table-row。

        $('row-selector-here').slideToggle(
            duration: 'fast',
            step: function() 
                if ($(this).css('display') == 'block') 
                    $(this).css('display', 'table-row');
                
            ,
            complete: function() 
                if ($(this).css('display') == 'block') 
                    $(this).css('display', 'table-row');
                
            
        );

【讨论】：

这也适用于将显示设置为flex 而不是table-row。我还必须添加另一个 if 子句来检测它何时将其设置为none，并将其设置为''，这样外部css 就可以在不被覆盖的情况下应用（jquery 直接在html 中与元素的css 混淆，它会在任何地方覆盖css ，除非使用了!important，我不想使用）。

【参考方案3】：

你可以使用回调来改变这个

$('#tableRowId').slideToggle( function()
   $(this).css('display', 'table-row');
);

【讨论】：

这样做的问题是它每次都将显示样式设置为表格行，而当您真正希望隐藏它的一半时间时。

同样的问题，不得不投反对票。 slideToggle() 显示和隐藏，这使它无法隐藏。在下面查看我的答案

【参考方案4】：

这是一个已知的bug（也称为here）。使用 jQuery slideToggle。没有任何方法可以使用 slideToggle 并让它正确保留显示样式。您可以在动画完成时通过回调应用显示样式，但这可能达不到您想要的效果。

【讨论】：

值得注意的是，错误报告说使用简单的 .toggle() 可以按预期工作。

【参考方案5】：

只需将此代码添加到回调函数中

$(this).css('display','');

【参考方案6】：

你可以在css中将其默认为

.block  display: table 

然后在加载页面时可以向上滑动

$(document).ready(function () 
    $('.btn').click(function()
         $('.block').slideToggle();
    )
    $('.block').slideUp();
);

下次它向下滑动时会显示：table。