ドロップダウンがたまに動いてたまに動かなくなる理由がわかった
課題
ヘッダーに取り付けたドロップダウンが機能したりしなかったするバグがありました。
原因 以下に私のソースコードを示します。
<!DOCTYPE html> <html> <head> <title>Example User|Ptwitter</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="R4INzI0htDU0qmde98fGYnJZFxNKU6eQMOh21ANzQC8aMQmGIE37cQhDrFLBvpHG+UKkUe2Pq+0D7NgLVa/0Mw==" /> <link rel="stylesheet" media="all" href="/assets/custom.self-01596b3fc77e6c99ecf4b8040373f4e18090f401b1563e465bbafa034d478c88.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/home_pages.self-baba7fd4dd70489fc9dad7d876a7f2c47dabaab02fe3fc53c9231e646714bbb7.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/sessions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" /> <script src="/assets/rails-ujs.self-2b8935521e2301b06b45bd42e623eb0c0acf76c3a6ba383b7429c6a2884f8c23.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap.self-268df15f6dcd79a7aab1677a4cf8f1bf54a59cb6d1e805efa0e1f8071110762e.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/home_pages.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/sessions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-5e866087125b4eb5e02a8365d73cdaeb7f2127bbb3f479fb54ab3ddb0d5c66af.js?body=1" data-turbolinks-track="reload"></script> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"> </script> <![endif]--> </head> <body> <nav class="nav-header"> <title>Example User|Ptwitter</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="+SkLUZZdCD3NSBgwDj5a0IxZ64qnLv0rz6976vovukSkmg8bOzFHefGh0zw4Rw10B0JYyADy8Vb8q9U1rPMOWA==" /> <link rel="stylesheet" media="all" href="/assets/custom.self-01596b3fc77e6c99ecf4b8040373f4e18090f401b1563e465bbafa034d478c88.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/home_pages.self-baba7fd4dd70489fc9dad7d876a7f2c47dabaab02fe3fc53c9231e646714bbb7.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/sessions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" /> <script src="/assets/rails-ujs.self-2b8935521e2301b06b45bd42e623eb0c0acf76c3a6ba383b7429c6a2884f8c23.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap.self-268df15f6dcd79a7aab1677a4cf8f1bf54a59cb6d1e805efa0e1f8071110762e.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/home_pages.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/sessions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-5e866087125b4eb5e02a8365d73cdaeb7f2127bbb3f479fb54ab3ddb0d5c66af.js?body=1" data-turbolinks-track="reload"></script>
scriptを二回読み込んでしまっていました。これはパーシャルでscript内容を書いたあとapplication.html.rbの方のscriptの内容を消さなかったためでした。
これを修正し、読み込みを一つにしたら安定して機能するようになりました。
動かないときはたまに動いて動いているときはたまに動かなくなるという珍しい挙動だったので解決するまでに時間がかかりました。
