1

slideToggle、fadeIn、または同様の関数を使用してjQueryでアイテム を表示するにはどうすればよいdisplay:blockですか? htmlに追加style="display:none"して、css が表示されたときに好きなようにスタイルを設定できることはわかっていますが、css のみを使用する方法はありますか? または、利点がある別の方法はありますか？display:inlineこの手法を使用して、要素が直感的ではなく、後でデバッグするのが難しい場合があることを示すときにjQuery を「だまして」使用する必要があります。トリックを使用した例を次に示します（2番目が表示された後でも、両方のdivをインラインに保ちます）。

jsフィドル

<div id="a">hello</div>
<div id="b" style="display:none">world</div>
<button>show world</button>​

js:

$("button").click(function(){
    $("#b").fadeIn();
});​

CSS:

div{
   display:inline;    
}​
4

4 に答える 4

1

使用を避けようとしている場合は、 を使用しdisplay: inlineて 2 つの div を個別に配置して正しく表示できますfloat: left。

クラスを使用して div を非表示にすると、後でコードをデバッグするのにも役立ちます。

次の例を参照してください。

http://jsfiddle.net/bq9Hn/

display:none と display:block を一緒に使用しないようにする場合は、div をバックグラウンドで非表示にしてから、より高い値z-indexを設定して前面に表示することができます。z-index例えば。

http://jsfiddle.net/8xjEz/2/

于 2012-08-14T02:15:04.947 に答える
1

http://jsfiddle.net/sechou/JYsnd/1/ HTML

<div id="a">hello</div>
<div id="b" class="hideme">world</div>
<button>show world</button>​

CSS

div{
   display:inline;    
}​
.hideme{
   display:none;
}
于 2012-08-14T02:03:11.037 に答える
0

これがあなたが求めているものだと思います。HTMLは必要ありません。インラインとコンマで非表示の両方を維持するだけです。

CSS:

div{display:inline,none;}​
于 2012-08-14T02:01:20.527 に答える
0

他の回答者に感謝しますが、さらに調査した結果、少しきれいな答えを見つけたと思います。fadeIn結果を変更するには、呼び出しでステートメントを変更するだけcss(display:whatever)です。およびその他の jQuery 効果は非同期であるためfadeIn、グラフィックの不具合は発生しません。この方法では、css は最初のスタイリングにのみ影響し、html にはスタイル属性がなく、jQuery ステートメントの意図と効果は明ら​​かです。このアイデアを提供してくれた jQuery フォーラム ユーザーの godsbest に感謝します。

jsフィドル

<div id="a">hello</div>
<div id="b">world</div>
<button>show world</button>​

js:

$("button").click(function(){
    $("#b").fadeIn().css("display","inline");
});​

CSS:

#a{
   display:inline;    
}
#b{
   display:none;        
}
于 2012-08-15T00:29:41.633 に答える