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)
ただこれだと２つ問題があって、
+ スマホだとメニューが開かない
+ 画面幅が狭くなって collapse したメニューでもマウスオーバーで開いてしまう
** スマホへの対応 [#a3d83332]
そもそもスマホではマウスオーバーが無いので自動開閉はしなくて良いのですが、
上野コードだとタップでもメニューが開かなくなってしまいます。
というか、１回目は開かず、２回目は開きます。
これは、スマホでの画面タップでは
- mouseover が発生 -> open
- mouseclick が発生 -> toggle すなわち close
が同時に起こるためです。
これを回避するために次のようにしました。
#gist(osamutake/1681a6abb9069e00591a/74b081678ba6b7499cb4b7356f06f0a41d53cd61)
mouseover ではなく 「mousemove の２回目」 でメニューを開きます。
タップでは mouseclick 前に mousemove が１回しか起きないので、
これで正しくメニューを開けます。
マウスカーソルの移動では mousemove の１回目で開いても２回目で開いても体感的には遅れは感じられません。
** collapse では開かないようにする [#i824944d]
非 collapse 状態では li.dropdown が float:left なので、
それを利用すればいいように思いました。
LANG:javascript
if ( $this.css('float')!='left' ) return;
を１行加えました。
** 最終版 [#p013e3cb]
次のコードで動いているようです。
#gist(osamutake/1681a6abb9069e00591a)
* コメント・質問 [#s6bf5d0b]
#article_kcaptcha
Counter: 9931 (from 2010/06/03),
today: 1,
yesterday: 0