jQuery slideToggle 显示类型

Question

我正在使用 jQuery slideToggle 来显示一个隐藏的表格行，但它将 display 样式设置为 block，而我需要将其设置为 display: table-row。你有什么想法可以实现这个吗？

提前感谢。

- ErnieStings

Answer 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
    });
});

- inorganik

---

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

@redsquare 注意我的代码-注释部分写着“输入所需的显示类型”。这样贬低唯一可行的解决方案并不明智。 - inorganik

下载我的代码有点困难，但是我还是给你点了赞。 - redsquare

@redsquare 谢谢，我很感激。我之所以给你的回答投了反对票是因为我实际上尝试过了。你回答的问题在于 slidetoggle() 可以显示和隐藏，但是使用你的修改方法时它无法隐藏。 - inorganik

Answer 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');
                }
            }
        });

- noypiscripter

---

这也适用于将显示设置为 flex 而不是 table-row 的情况。我还不得不添加另一个 if 子句来检测它是否设置为 none，并将其设置为 ''，以便外部 CSS 可以应用而不被覆盖（jQuery 直接干扰元素的 CSS 在 HTML 中，这将覆盖任何地方的 CSS，除非使用 !important，但我不想使用）。 - Don Cullen

Answer 3

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

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

- redsquare

---

问题在于它每次都将显示样式设置为table-row，而有一半的情况下你真正需要隐藏它。 - dmr

同样的问题，必须给它投下反对票。slideToggle() 用于显示和隐藏，这样就不能隐藏了。请查看我的答案。 - inorganik

Answer 4

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

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

- Ankit Jadav

Answer 5

这是一个已知的错误（也可以在这里找到）。使用jQuery的slideToggle时，没有任何方法可以使其正确地保留显示样式。当动画完成时，您可以通过回调应用显示样式，但这可能无法实现您想要的效果。

- Adam Bellaire

---

值得注意的是，错误报告指出仅使用 .toggle() 可以按预期工作。 - Marc