Bootstrap 3.3.4 でサイトを構築後、スマホ・タブレットで表示確認していたところ、Dropdowns (ドロップダウンメニュー)の挙動がおかしいのを発見しました。
- 複数のDropdownを設定している
- ドロップダウンメニューAをタップして開く
- 次にドロップダウンメニューBをタップする
- すると開いていたメニューAは閉じるが、タップしたメニューBは開かない
- もう一度メニューBをタップするとメニューBが開く
といった感じです。
「bootstrap dropdown タップ時」と検索すると bootstrap.js を修正する方法もあったのですが、まずは以下ページを参考に、簡単に修正できるCSSの追記を試してみました。
参照ページ: Bootstrap 2.3でのドロップダウンメニュー不具合@アットスタイル
追記するCSSはたったこれだけ。
.dropdown-backdrop { position: static; }
これでスマホ・タブレットでのタップ時の不具合が解消されました。
(メニューAが開いている時にメニューBをタップすると、Aが閉じてBが開く。逆も同様。)
デスクトップで表示してる際は問題ないので、ちゃんとスマホ・タブレットで確認することを忘れずに。