jQuery show()関数にdisplay:inline-blockを追加するにはどうすればよいですか?


158

私はこのようないくつかのコードを持っています:

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、ブロックの代わりに追加したいと思います。


1
さらに詳細を提供する必要があります。クイックテストjsfiddle.net/DD3Sfでうまくいきます。
Gijs

@gijs申し訳ありませんが、現在動作しています。キャッシュの問題だと思います。お時間をいただきありがとうございます
Giri

回答:


208

の代わりに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");
}

91
これは明白なようだが、あなたはまだのタイミング側面を利用したい場合かもしれませんshow$("#id").show(500))、単に追加cssそれに関数を:$("#id").show(500).css("display", "inline-block");
BenR

2
さらに一歩進んで、jQueryではなくCSSクラスを使用してすべての非表示/表示を処理します。 $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); CSS:.hidden { display: none !important }
Joe Maffei 2017年

10
これは受け入れられた回答ですが、jquery docsに記載されている内容を反映していません。これは、表示プロパティが最初の状態に復元されることを除いて、.css( "display"、 "block")を呼び出すのとほぼ同じです。要素の表示値がインラインの場合、非表示にして表示すると、再びインラインで表示されます。 したがって、デフォルトdisplayを使用するには、CSSにクラスを追加してから、要素のIDをdisplay:inline-block;呼び出しhide()show()使用する必要があります。これは、よりクリーンで予測可能なコードであり、スタイル設定も簡単です。
Abdullah Adeeb

1
@AbdullahAdeeb問題はhide()、ページの読み込み時にjs を使用する必要があることです。設定#element{display:inline-block;display:none;}は行いません。私は最もクリーンな解決策は-CSSで$('#element').fadeIn().addClass('displaytype');異なる.displaytypesを設定し、jsで1つの表示機能を持つことができるため、上記の答えよりも優れていると思います。ここに私の答えを参照してください:stackoverflow.com/questions/1091322/...
Fanky

36

使用した後のCSSプロパティの設定は機能する.show()はずです。HTMLページの間違った要素をターゲットにしている可能性があります。

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

ただし、効果を使用.show(), .hide()しない場合は、次のようにCSSプロパティを手動で設定しないでください。

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

3
jquery show / hide / toggleは以前の表示値を復元することに注意してください。したがって、jqueryで非表示にした場合、showを呼び出すことで機能します。
Curtis Yallop、2014年

「.show()を使用した後のCSSプロパティの設定は機能するはずです。」とにかく手動でCSSを手動で更新する場合、show()を使用する意味は何ですか?
JSON

9

次のように、show()またはfadeIn()の直後にcss()を使用します。

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

5

やった

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

魅力のように動作します。


7
それは答えですか、それとも承認ですか。
NREZ 2013

5

ラズのソリューションは.hide()and .show()メソッドに対しては機能しますが、.toggle()メソッドに対しては機能しません。

シナリオによっては、CSSクラス.inline_block { display: inline-block; }を作成して呼び出すと$(element).toggleClass('inline_block')問題が解決します。


2

表示/非表示のアニメーションを使用できます

このようなもの:

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

2

これを試して:

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

show()これでは意味がありません。これは同じです$('#foo').css('display','inline-block');
リアム

@リアム無意味ではない。0を変更して緩和するか、これを変更して他の固有のshowオプションにアクセスできます。
JSideris

2

アニメーションと、最後に表示プロパティを設定することの両方が必要だと思います。その場合は、show()以下に示すようにコールバックを使用する方がよいでしょう。

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

これにより、両方の結果が得られます。


これは不正解ですinline-block。アニメーション全体が実行された後でないと、モードになりません。つまり、400ミリ秒の間blockinline-blockその後で「ポップ」します。
Alexis Wilke 2017年

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

0

実際、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の使用も重要です。おそらくここでは機能しません-スタイルをインラインで設定することは通常他のどのルールよりも強力であるため


0

それが親である最良の.let か、CSSのみが持つものをdisplay :inline-block親に追加しdivますdisplay :inline-block


-5

最良の方法は、セレクタに!importantサフィックスを追加することです。

例:

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

3
これは.hide()を防ぎませんか?
Kaan Soral 2013年

!重要なのは、他に選択肢がない場合にのみ必要です。より良いjQueryコードで修正できる場合、私の意見ではこの問題に取り組む正しい方法ではありません。
ブランドン

6
重要について覚えておくべき事は!important、それがあるということです重要な、それを使用しないように。
user1728278
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.