2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

bootstrapのNavbarのハンバーガーメニューが閉じない[原因はTurbolinks]

Last updated at Posted at 2019-07-20

環境

rails 5.2

問題

navbarのハンバーガーメニューを開き、リンクを踏んだ後に、展開されたメニューが閉じずに残っている。
image.png

この状態でどの展開されたメニュー以外の場所をクリックしてもメニューが収納されない。
リロードしたときにのみ、メニューが収納される。

解決策

悪さをしている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によって処理されている。
image.png

世の中の多くのturbolinksでviewが動かないんです!という記事は、「TurbolinksによってjQueryのreadyが発火しないから」という原因に帰着させているものが多い。しかし今回は、jQueryが動かないことが原因ではない。
原因は、
ページ遷移したあとも、nav-open classがhtmlタグに付与され続けるから。

これは、turbolinksで更新されるのがbodyタグの中のHTMLであることに由来している。
今回nav-open classがついているのは最上位のhtmlタグであるため更新されずに残り続けてしまっている。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?