如何在 jQuery show() 函数中添加 display:inline-block？答案

【问题标题】：How to add display:inline-block in a jQuery show() function?如何在 jQuery show() 函数中添加 display:inline-block？
【发布时间】：2012-03-04 19:47:34
【问题描述】：

我有一些这样的代码：

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

show函数添加display:block。但我想添加display:inline-block 而不是阻止。

【问题讨论】：

您需要提供更多详细信息。它适用于我的快速测试：jsfiddle.net/DD3Sf .
@gijs 抱歉，它现在正在工作。我认为它的一些缓存问题。感谢您的宝贵时间

标签： jquery show-hide

【解决方案1】：

尝试使用 CSS 来隐藏和显示内容，而不是 show。

function switch_tabs(obj) {
    $('.tab-content').css('display', 'none'); // you could still use `.hide()` here
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#' + id).css('display', 'inline-block');
    obj.addClass("selected");
}

【讨论】：

这似乎很明显，但如果您仍想利用show ($("#id").show(500)) 的计时方面，只需将css 函数附加到它：$("#id").show(500).css("display", "inline-block");
我会更进一步，使用 CSS 类而不是 jQuery 来处理所有隐藏/显示。 $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); 在 CSS 中：.hidden { display: none !important }
尽管这是公认的答案，但它并不反映 jquery docs 中所述的内容：这大致相当于调用 .css("display", "block"),除了显示属性恢复到最初的样子。如果一个元素的显示值为内联，然后被隐藏并显示，它将再次内联显示。因此要拥有默认的display，您需要在您的css中添加一个带有display:inline-block;的类，然后使用元素的 id 调用 hide() 和 show()。这是更简洁、更可预测的代码，并且更易于设置样式。
@AbdullahAdeeb 问题是你需要在页面加载时通过 js hide()。设置#element{display:inline-block;display:none;} 不起作用。我认为最干净的解决方案是 $('#element').fadeIn().addClass('displaytype'); - 比上面的答案更好，因为您可以在 css 中设置不同的 .displaytypes 并在 js 中具有一个显示功能。在这里查看我的答案：stackoverflow.com/questions/1091322/…

【解决方案2】：

在使用.show() 之后设置CSS 属性应该可以工作。也许您在 HTML 页面上定位了错误的元素。

 $('#foo').css('display', 'inline-block');

但是，如果您没有使用 .show(), .hide() 的任何效果，为什么不手动设置这些 CSS 属性：

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');

【讨论】：

请注意 jquery show/hide/toggle 恢复以前的显示值。所以如果你用 jquery 隐藏它，调用 show 就可以了。
"在使用 .show() 后设置 CSS 属性应该可以。"如果您仍然要手动更新 css，那么使用 show() 有什么意义？

【解决方案3】：

在 show() 或 fadeIn() 之后使用 css()，如下所示：

$('div.className').fadeIn().css('display', 'inline-block');

【讨论】：

【解决方案4】：

我做到了

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

像魅力一样工作。

【讨论】：

这是一个答案还是一个确认..？

【解决方案5】：

Razz 的解决方案适用于 .hide() 和 .show() 方法，但不适用于 .toggle() 方法。

根据具体情况，拥有一个 css 类 .inline_block { display: inline-block; } 并调用 $(element).toggleClass('inline_block') 可以为我解决问题。

【讨论】：

【解决方案6】：

您可以使用animate insted 显示/隐藏

类似这样的：

function switch_tabs(obj)
{
    $('.tab-content').animate({opacity:0},3000);
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).animate({opacity:1},3000);
    obj.addClass("selected");
}

【讨论】：

【解决方案7】：

试试这个：

$('#foo').show(0).css('display','inline-block');

【讨论】：

这里的show() 毫无意义。这与$('#foo').css('display','inline-block'); 相同
@Liam 并非毫无意义。您可以更改 0 以缓和，或修改此以访问其他独特的 show 选项。

【解决方案8】：

我认为您既想要动画，又想要在最后设置显示属性。在这种情况下，您最好使用show() 回调，如下所示

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

这样你就可以实现这两个结果。

【讨论】：

这是不正确的，只有在整个动画运行后，您才会以inline-block 模式结束。这意味着它会在 400 毫秒后在 block 和 inline-block 之间“弹出”。

【解决方案9】：

实际上 jQuery 只是简单地清除了 'display' 属性的值，并没有将其设置为 'block'（参见 jQuery.showHide() 的内部实现） -

   function showHide(elements, show) {
    var display, elem, hidden,

...

         if (show) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if (!values[index] && display === "none") {
                elem.style.display = "";
            }

...

        if (!show || elem.style.display === "none" || elem.style.display === "") {
            elem.style.display = show ? values[index] || "" : "none";
        }
    }

请注意，您可以覆盖 $.fn.show()/$.fn.hide();隐藏时将原始显示存储在元素本身中（例如，作为属性或在 $.data() 中）；然后在显示时再次应用。

此外，使用 css important! 在这里可能不起作用 - 因为设置内联样式通常比任何其他规则都更强大

【讨论】：

【解决方案10】：

<style>
.demo-ele{display:inline-block}
</style>

<div class="demo-ele" style="display:none">...</div>

<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>

【讨论】：

【解决方案11】：

最好的 .let 它是父 display :inline-block 或添加父 div CSS 只有 display :inline-block。

【讨论】：

【解决方案12】：

最好的方法是给选择器添加 !important 后缀。

例子：

 #selector{
     display: inline-block !important;                   
}

【讨论】：

这不会阻止 .hide() 吗？
!important 仅在没有其他选项的极端情况下才需要。在我看来，当它可以用更好的 jQuery 代码修复时，这不是解决这个问题的正确方法。
关于!important，要记住的重要是不使用它重要。