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