0

次のように、インライン css を使用して要素を非表示にしています。

<span class="hidden-nojs" style="display:none">Some text</span>

次に、次のように jQuery を使用して要素を表示します。

$(".hidden-nojs").show();

これはうまくいきます。インライン css を削除して、hidden-nojs クラスの外部 css スタイルシートに display:none を配置するとすぐに、機能しなくなります。これは私が外部スタイルシートに書いたものです：

.hidden-nojs {
    display: none;  
}

jQueryがすでに実行された後に外部スタイルシートが読み込まれると思いますか? css で複数の要素を非表示にし、インライン css の使用を避けたいので、これはやや面倒です。

show() がインライン css を使用して非表示になっているフィールドに対してのみ機能するのはなぜですか? この問題を解決するにはどうすればよいですか?

4

2 に答える 2

1

問題は、インライン要素を非表示にして表示しようとしていることです。jQuery の効果は、ブロック タイプの要素でのみ機能します。jQuery エフェクトはインライン要素のスタイルを操作します。これが、そのバージョンが機能し、クラス バージョンが機能しない理由です。

考えてみれば、ブロック型要素は長方形です。高さや幅をアニメートするだけなので、拡大や縮小をアニメートするのは簡単です。

インライン要素は必ずしも四角形であるとは限りません。そのため、jQuery の効果はほとんど機能しません。例を挙げると：

<p>Inside paragraph <span class="foo">This is a test</span> contains text.</p>
<input type="button" id="bar" value="Toggle">

走る：

$(function() {
  $("#bar").click(function() {
    $("span.foo").toggle();
  });
});

最初のクリックで非表示になります。2番目はブロックに変換します（段落に含まれなくなります）。これが、jQuery の効果がインライン要素で実際に機能しないということです。

内部的には、jQuery の効果は、アニメーションと と の間のトグルの組み合わせによって機能しdisplay: noneますdisplay: block。これが意味することは、jQuery の効果は表のセルでも機能しないということです。なんで？そうではなくdisplay: block、効果的display: table-cellです。toggle()これを自分で試して、表のセルを数回実行した後に何が起こるかを確認してください。

それで、解決策は何ですか？インライン コンテンツの場合、最も簡単な解決策はクラスを使用することです。

hidden { display: none; }

と

$("span.hideme").toggleClass("hidden");

これにはアニメーション効果はありません。animate()これは自分で追加できますが、インライン要素でうまく機能するかどうかは 100% ではありません。

または、コンテンツがブロックになる可能性がある場合は、ブロックにすれば、これらの問題はすべて解消されます。あなたの場合、 a の<div>代わりに a を使用するか、に<span>追加display: blockし<span>ます。

于 2010-03-22T06:49:12.967 に答える
0

この問題を再現することはできませんでしたが、Cletus が話していることとはあまり関係がないと思います。ここアニメないの？

スタイルをインラインに置くことは、それがインライン要素であるという事実とは何の関係もありません。自作のトグル可視性スクリプトとクラスを使用しているときに、過去に同様の問題が発生しました。多くの単純な実装 (私のものなど) が機能する方法は次のとおりです。

function toggle(el) {
    el.style.display = (el.style.display == 'none') ? '' : 'none';
}

非表示でない場合は、インライン スタイルを非表示に変更します。非表示の場合は、インライン スタイルを削除します。インライン スタイルを削除すると、スタイルシートで定義されたスタイルに戻るため、表示されません。

私が言ったように、jQueryのshow()機能を使用してエラーを複製しようとしましたが、できませんでした。私のテストでは、jQuery は以前の表示スタイルに戻すほどスマートなので、何が問題なのか正確にはわかりませんが、以前の問題とよく似ているように思えます。

解決策に関する限り、hidden-nojsクラスを削除するだけです。

于 2010-03-22T08:39:51.077 に答える