2016-06-23 4 views
-1

私は2つのフィドルを作成しました。プロダクトリストの項目をクリックするとサブメニューが表示されますが、私はそれを変える必要があります。フィドルの唯一の違いは、2番目のリンクが必要なように動作するが、ファイアウォールとクロムでテストされた "ハック"であるが、エッジでは機能しないということだ。CSSとJavaScriptのサブメニューの高さを変える

https://jsfiddle.net/tzswq34a/2/

https://jsfiddle.net/tzswq34a/3/

コードの唯一の違いは、第2のリンクはJavascriptセクションにライン10上に以下のコードの行を有することである。

$submenu.height(); 

なぜ高さを照会ありませんサブメニューのそれは動作させる?

+0

質問を求めるヘルプには、質問自体に** **それを再現するのに必要な最短のコードが含まれている必要があります。あなたは[**サンプルまたはサイトへのリンク**]を提供していますが(http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-リンクが無効になる場合、あなたの質問は同じ問題を持つ他の将来のSOユーザには価値がないでしょう。 –

+0

ネットが壊れないようにしましょう。 –

+0

JSfiddleがダウンするのは不明ではありません。それにもかかわらず、あなたのコードを見るために外部サイトに行く必要はありません。もしあなたが私たちに余分な仕事をさせるなら、あなたは助けを得ることはあまりありません。 –

答えて

0

残念ながら、現在CSS Specは/からautoまでのアニメーションをカバーしていません(デフォルトではheight: auto;など)。ブラウザは、明示的な高さを必要とします。

編集:明確にする:$submenu.height();を使用すると、高さが明示的に設定され、スムーズに移行することがあります。

+0

高さがautoに設定されていない場合、高さが0に設定されていないと思われます。 –

+0

@Stephen Brownは高さの既定値がautoの場合です。 – MattDiMu

+0

10行目は高さが設定されていません。ちょうどそれをチェックしています。10行目で高さが問い合わせされているため、上記の行の0に設定されている高さは実際にはすぐに機能します。しかし、それは事実ではありませんか? CSSの変更は関数の実行後にのみ行われますか? –

0

あなたが興味を持っているのであれば、これは高さ問い合わせなしで動作します。https://jsfiddle.net/tzswq34a/7/ Kyle Simpson(https://twitter.com/getify)は、CSSサブシステムが "怠け者"であり、バッチが可能な限り連携していると言います。そのことについて私が理解しているのは、高さが同じ関数呼び出しでulに2回設定されているだけなので、最後の値が設定されるため、要素には0が決して設定されませんでした。

$submenu.height(); 

この行は、関数の実行中に最初のCSS高さの割り当て(0)が要素に設定されるため、リンク2で機能します。

新しいフィドルでは、トランジションの高さはsetTimeoutに渡される無名関数の中で設定されます。イベントループは現在実行中の関数の後で処理されるため、無名関数が呼び出される前に0に設定されます。

関連する問題