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つ問題があって、

  1. スマホだとメニューが開かない
  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: 7423 (from 2010/06/03), today: 2, yesterday: 0