jQueryでUL,LIをslideしたいだけなのにIEにはほとほと困りましたの履歴

履歴一覧

UL,LIで作られたメニューバーのようなものを開閉する仕組みをjQueryでやることになりました。ただ、普通に全体を隠せばいいっていうものではなくて、（１）特定の項目以外を隠す動作を入れたいのと、（２）ネストしても動作するという仕様です。しかし、IEに思った以上にハメられ、色々試行錯誤した結果、３つの偉大なる知見を得て解決できたのでここに記します！


普通に全体を消すだけなら

$('ul#target').slideUp(500)

でできます。

（１）特定の項目以外を隠す動作を入れたい というのは、例えば選択されている項目にcurrentクラスがつけられていて、その項目以外を隠す場合は

$('ul#target li').not('.current').slideUp(500);

と、jQueryなら簡単に書けました。すごいね。.not()を知った時はjQueryに惚れ直したｗ

（２）ネストしても動作する については少しやっかいで、ul,liの構造だけでは不可能です。ulは子要素にliしか持てない。ということはliの子要素にulがくることになる。もし、ulを子に持つliがcurrentでない場合はliが消されることになるが、同時に子要素のulまで消えてしまう。そのulの中にcurrentがあるかもしれないため、liに隠す処理はつけられない。 だから、対象テキストの上位はliではなくもう一つ要素を追加しなければならない。

ようするに、こういう構造じゃないとうまくいきません！詳しくは次節で述べよう。

  <ul>
    <li class="container">
      <div class="node">test</div>
      <ul>
        <li><div class="node">test</div></li>
        <li><div class="node current">test</div></li>
        <li><div class="node">test</div></li>
      </ul>
    </li>
    <li><div class="node">test</div></li>
  </ul>

ul直下にulを入れても、ul > li > ulになるように直される

ul直下にulを入れてました。それでもOperaやFirefoxはちゃんと動くから…。でもIEではul > ulが、ul > li > ulになったかのように直される！こんなとこだけ無駄に仕様に忠実！！さすがです。これはIEの方が正しいのかなぁ。どうなのかなぁ。

http://item.mindia.jp/akkun_dev/sample/ul-li.html
IEだけul > ulの背景色が変わるはず。

プログラム的にちょっと変更しまくらないといけない作りだったので、めんどくさいなぁと思いつつ、ul > li > ulに直しました。

slideUpせずに、downしたように消える

その結果がこれです。
http://item.mindia.jp/akkun_dev/sample/slide-bad.html

slideUpしろっつってんのに、downしてどーする！


ul,liであるべきところをdivに変えてみました。
http://item.mindia.jp/akkun_dev/sample/slide-div.html
ナニコレ…、ウゴクヨ…。ということで疑惑の目はul,liに向けられることになりました。

白borderを入れたり（これでたまに治る）、overflowしたりfloatしたりしたけど全然効かない。でもなぜかこれでスムーズに動くようになりました。

display: inline


それがこれ
http://item.mindia.jp/akkun_dev/sample/slide-good.html

やりました。ついにやりました。
これを発見するのに数時間はかかった…。

IE6だけ一瞬変になる

たださっきのやつでもIE7はスムーズにいくのに、IE6だけはまだちょっと変です。一瞬元に戻ったかのような動きになります。

でもたまたま他の問題で標準準拠モードに切り替えてみたところ、発生しなくなりました。標準準拠万歳！！
http://item.mindia.jp/akkun_dev/sample/slide-good-st.html



これ調査するのにほぼ一日費やしてしまった。

ul,liじゃなくてdivにするとかもっと何かを犠牲にして手っ取り早く実装する方法はいくらでもあったんだろうけど、いいやん！気になったらトコトン調べないと気が済まないの！

根本的な理由についてはよくわかってないです。IEバグについてのブログとか見まくったけど、どこにもそれらしきものは載ってなかった。display:inlineでうまくいくのがどうも不思議だなぁ。インライン要素だったら下にさがって消えるんじゃないかと思うんだけど。

詳しい原因とか、もっとこうした方がいいとかあれば誰か教えて欲しいです…。