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

How to add display:inline-block in a jQuery show() function?

提问by Giri

I have some code like this:

我有一些这样的代码：

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

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

The show function adds display:block. But I would like to add display:inline-blockinstead of block.

显示功能添加display:block. 但我想添加display:inline-block而不是阻止。

回答by Razz

Instead of show, try to use CSS to hide and show the content.

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

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

回答by mas-designs

Setting the CSS property after you have used .show()should work. Maybe you are targeting the wrong element on your HTML page.

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

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

But if you are not using any effects of .show(), .hide()why don't you set those CSS properties manually like:

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

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

回答by Yura Loginov

Use css() just after show() or fadeIn() like this:

像这样在 show() 或fadeIn() 之后使用 css() ：

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

回答by user968903

Razz's solution would work for the .hide()and .show()methods but would not work for the .toggle()method.

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

Depending upon the scenario, having a css class .inline_block { display: inline-block; }and calling $(element).toggleClass('inline_block')solves the problem for me.

根据场景，拥有一个 css 类.inline_block { display: inline-block; }并调用$(element).toggleClass('inline_block')为我解决了这个问题。

回答by user2204545

I did that

我这样做了

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

works like a charm.

奇迹般有效。

回答by Carlos

try this:

尝试这个：

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

回答by Narek

You can use animateinsted of show/hide

您可以使用动画插入显示/隐藏

Something like this:

像这样的东西：

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

回答by Reza

I think you want both the animation and to set the display property at the end. In that case you better use show()callback as shown below

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

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

This way you will achieve both the results.

通过这种方式，您将实现这两​​个结果。

回答by Jon

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

回答by wuball

The best .let it's parent display :inline-blockor add a parent divwhat CSS only have display :inline-block.

最好的 .let 它是父级display :inline-block或添加父级divCSS 仅有的display :inline-block。