環境
rails 5.2
問題
navbarのハンバーガーメニューを開き、リンクを踏んだ後に、展開されたメニューが閉じずに残っている。
この状態でどの展開されたメニュー以外の場所をクリックしてもメニューが収納されない。
リロードしたときにのみ、メニューが収納される。
解決策
悪さをしているTurbolinksを無効化する。
<%= link_to "メニュー1", "#", data: {"turbolinks" => false}, class: "nav-link" %>
原因
Rails4からデフォルトで導入されているturbolinksが原因。
https://qiita.com/ryichiki/items/157b0f4288ce605de2a2
こちらの記事が参考になる(というか今回の問題に関してほぼ答えを言っているのだが)
簡単に言うと、
headタグの内のcss,jsが、リンク前と後で同じファイルであれば再利用して、body内のHTMLだけを置き換えるという処理。これにより、画面の表示を高速化する。
しかし疑問が...
ハンバーガーメニューが展開される仕組みは、ハンバーガーアイコンをクリックしたときに、nav-openというclassがhtmlタグに付与されるから。これは、JQueryによって処理されている。
世の中の多くのturbolinksでviewが動かないんです!という記事は、「TurbolinksによってjQueryのreadyが発火しないから」という原因に帰着させているものが多い。しかし今回は、jQueryが動かないことが原因ではない。
原因は、
ページ遷移したあとも、nav-open classがhtmlタグに付与され続けるから。
これは、turbolinksで更新されるのがbodyタグの中のHTMLであることに由来している。
今回nav-open classがついているのは最上位のhtmlタグであるため更新されずに残り続けてしまっている。