bootstrapで作ったドロップダウンリストが動かない

Question

<div class="menu_btn_size btn-group">
  <a href="#" class="menu_btn_size btn btn-warning" data-toggle="dropdown">お問い合わせ<span class="caret"></span></a>
  <ul class="menu_btn_size dropdown-menu">
    <li><a href="/questions/index">よくある質問</a></li>
    <li><a href="/inquiry">問い合わせフォーム</a></li>
    <li class="divider"></li>
    <li><a href="/home/renrakusaki">連絡先</a></li>
  </ul>
</div>

作りは同じものでこのようなドロップダウンメニューをパーシャル「_header.erb」として二つ作っています（以下、片方をドロップダウンA、もう片方をドロップダウンBとします）

-header.erb内のドロップダウンAのリストを展開し、そこから例えばリンク先 <li><a href="/questions/index">よくある質問</a></li>に飛びます。

すると、なぜかそのページで読み込んだパーシャル「_header.erb」内にあるドロップダウンBのメニューが開けなくなってしまいます。
ブラウザを更新すればちゃんとドロップダウンリストBが正常に展開できるようになるのですが、どうしてこのような現象が起きるのか原因がわかりません

原因を教えていただきたいです。。。

追記；
一応、<div class="menu_btn_size btn-group">部分に「dropdown」クラスを加え、
.dropdown:hover > .dropdown-menu{
display: block;
}
を適用させた結果無理やりぎみではありますがマウスオーバーでドロップダウン内のメニューを表示できるようにはなったのですが。。。
こうしても結局スマホでページを見た際マウスオーバーが使えないわけですから、根本的な解決にはなってないですよね、、、

Comments

[takepieee]

もし移動した際にコンソールでJSエラーが出ていたら内容をお願いします。あとブラウザによって挙動に変化はないかもお願いします。

Answer 1

bootstrap.jsが正常に読み込まれていない可能性が高いですね。

正常に読み込まれている場合、ボタンをクリックしたらaria-expanded="true"という属性(開いてるときtrue、閉じたときfalse)がくっつきます。

<a class="menu_btn_size btn btn-warning" href="#" data-toggle="dropdown" aria-expanded="true">

開発ツールか何かで動作するページと動作しないページを見比べてみてください。

あとスマホ版ですが:hoverと同じ内容の.hoverを用意しておきタップしたら.hoverがつくとやっておけば一応いけますよ。
まあ、読み込みを何とかしたほうがよいかと思いますが。