0

ここで何かが欠けているように見えるので、誰かがボンネットの下で行われているプロセスを説明してくれれば、とてもありがたいです.

私が達成しようとしているのは、特定の要素の内容を隠していた要素の CSS を削除した後に jQuery が提供する.slideDown()効果を得ることです。

私がやろうとしていることの詳細を説明/表示するためのフィドルを作成しました:

http://jsfiddle.net/iOnline247/4Ztpg/

繰り返しますが、私がしていることの内部とその理由について知りたいです。きっと脳の大きさも関係あると思いますが、仲良くしましょう…

編集 ------ インライン スタイルは、HTML がサーバーからレンダリングされる方法です。残念ながら、私はそれをまったく制御できません。

4

3 に答える 3

2

.slideDown()見えない要素を取り、アニメーションで見えるようにします。表示されないようにしているスタイルを最初に削除すると、すぐに表示されます。それが表示.slideDown()されると、何もしません。

問題は、そもそもなぜスタイルを削除するのかということです。そして、なぜインライン スタイル セットを持っているのですか?

インライン スタイルをオーバーライドする必要がある場合 (何らかの理由でソース HTML から削除できない場合)、ドキュメントの読み込み時にこれを行うことができます。

$(function() {
    $(".some-text").css("display","none");
});

これでスライドダウンが機能し、クラスを削除する必要がなくなりました。スタイルを設定すると.css、インライン スタイルがオーバーライドされます。

編集：これは実証するためのフィドルです：

http://jsfiddle.net/VjWEs/1/

div を別の div でラップしたことに注意してください。表示されたときに実際にブロックとして表示されていることがわかります。を に変更すると、インライン表示は保持さ.css("display","none");れ.hide()ますが、それ以上スライドすることはできず、表示されるだけです。

于 2012-10-18T19:08:38.527 に答える
1

すべての CSS を CSS ファイルに保持し、インライン スタイルを使用しないでください。また、CSS で使用する必要もありません!important。

no-displayそうは言っても、スライドする前にクラス を削除する必要はありません。slideDown要素を下にスライドさせた後に要素に追加display:blockされます (必要に応じて、コールバックでクラスを削除できます)。

于 2012-10-18T19:08:51.720 に答える
0

この質問にはすでに良い答えがありますが、とにかくフィドルを作成しました。それが役に立てば幸い。インライン スタイルを使用する必要がないように、デモを変更しました。詳細については、こちらをご覧ください。

//jQuery
$('#clickme').click(function() {
  $('.some-text').slideDown('slow', function() {
     //slide done, can do more stuff here if u need to
  });
});


<!-- HTML -->
<h3 id="clickme">More Info</h3>
<div class='some-text'>The div to slide</div>


/*CSS*/
.some-text { height: 20px; display: none; }
于 2012-10-18T19:20:46.527 に答える