bootstrapのdropdownを自動開閉 のバックアップソース(No.2)
更新[[公開メモ]] * Bootstrap の dropdown menu をマウスオーバーで自動開閉したい [#t0231e31] http://dora.bk.tsukuba.ac.jp/event/ICSPM24/index これのメニューの所で、クリックしなくてもメニューが開くようにしたかったのです。 ** 基本を確認 [#h1bcb5ca] https://github.com/twbs/bootstrap/blob/master/js/dropdown.js を見ると、li.dropdown に .open を付けてやればメニューが開くことが分かります。 ** とりあえず開く [#m0016bcc] #gist(osamutake/1681a6abb9069e00591a/ad21a53950b29db5955e55e6097dbaa70690271d) ただこれだと2つ問題があって、 + スマホだとメニューが開かない + 画面幅が狭くなって collapse したメニューでもマウスオーバーで開いてしまう ** スマホへの対応 [#a3d83332] そもそもスマホではマウスオーバーが無いので自動開閉はしなくて良いのですが、 上野コードだとタップでもメニューが開かなくなってしまいます。 というか、1回目は開かず、2回目は開きます。 これは、スマホでの画面タップでは - mouseover が発生 -> open - mouseclick が発生 -> toggle すなわち close が同時に起こるためです。 これを回避するために次のようにしました。 #gist(osamutake/1681a6abb9069e00591a/74b081678ba6b7499cb4b7356f06f0a41d53cd61) mouseover ではなく 「mousemove の2回目」 でメニューを開きます。 タップでは mouseclick 前に mousemove が1回しか起きないので、 これで正しくメニューを開けます。 マウスカーソルの移動では mousemove の1回目で開いても2回目で開いても体感的には遅れは感じられません。 ** collapse では開かないようにする [#i824944d] 非 collapse 状態では li.dropdown が float:left なので、 それを利用すればいいように思いました。 LANG:javascript if ( $this.css('float')!='left' ) return; を1行加えました。 ** 最終版 [#p013e3cb] 次のコードで動いているようです。 #gist(osamutake/1681a6abb9069e00591a) * コメント・質問 [#s6bf5d0b] #article_kcaptcha
Counter: 9949 (from 2010/06/03),
today: 5,
yesterday: 0