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

小开

可以使用充满活力代替 show/hide

就像这样:

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

小开

最佳答案

尝试使用 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()之后设置 CSS 属性应该可以工作。也许您在 HTML 页面上的目标是错误的元素。

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

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

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

小开

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

根据不同的场景，使用 css 类 .inline_block { display: inline-block; }并调用 $(element).toggleClass('inline_block')可以为我解决这个问题。

小开

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

例如:

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

小开

试试这个:

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

小开

是我干的

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

非常有效。

小开

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

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

小开

实际上 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";
}
}

请注意，您可以覆盖 $。Show ()/$.Hide () ; 在隐藏时将原始显示存储在元素本身中(例如作为属性或 $。Data () ; 然后在显示。

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

小开

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

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

这样你就可以达到两个结果。

小开

最好的。让它的父 display :inline-block或添加一个父 div什么 CSS 只有 display :inline-block。

小开

<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>