hoverした状態でページをリロードすると意図した動作と逆になる＆バブリング？してしまう

Question

970px以上で動作するメガメニューを作りたいのですが、困っていることが２つあります。
（ブラウザはChromeとEdgeとFireFoxを使って確認しました。２つの困りごとどちらともFireFoxのみ下記のようになってしまいます。）
分かりにくい説明で申し訳ありませんが、教えていただけるとありがたいです。
よろしくお願いします<(_ _)>

【困りごと１】

li#megabtn にカーソルが乗った状態でページをリロードすると、「li#megabtn からカーソルが離れたときに #megabtnに .is-active がついて、li#megabtn にカーソルが乗った時に #megabtnの .is-active が消える」という風になってしまいます。
ページをリロードした時に li#megabtn にカーソルがある場合でも、#megabtnに .is-activeをすぐにつけるにはどうしたら良いでしょうか。。

【困りごと２】

上記のように、li#megabtn にカーソルが乗った状態でページをリロードすると、「li#megabtn から下にカーソルを動かしたときに#megabtnの .is-activeが付いたり消えたり」してしまいます。
（バブリングというのでしょうか？stoppropagationを使ってみたりしたのですが、解決できませんでした。）

 <ul id="menu-test" class="nav navbar-nav dropdown">
                     
     <li id="megabtn" class="start">
		<a class="dropdown-toggle hover-btn sp-hide" href="products/">
          商品情報<b class="caret"></b>
		</a>
		<div class="megamenu">
			<div class="container megawrapper">
				<p class="topcategory">商品情報</p>
            	<dl class="megamenu-inner">
					<dt>商品カテゴリ１</dt>
                      	 <dd>
							  <ul>
								  <li><a href="products/01/"><img class="res" src="/images/products01.png" alt="商品１"><span>商品１</span></a></li>
								  <li><a href="products/02/"><img class="res" src="/images/products02.png" alt="商品２"><span>商品２</span></a></li>
								  <li><a href="products/03/"><img class="res" src="/images/products03" alt="商品３"><span>商品３</span></a></li>
							  </ul>
						 </dd>
            	  </dl>
				  <ul class="bottom-menu">
					  <li><a href="product/">商品一覧へ</a></li>
					  <li><a href="products/">商品詳細へ</a></li>
				  </ul>
			  </div>
			</div>
       </li>

       <li id="dropdown2">
           <a class="dropdown-toggle" href="menu2/">
               メニュー２<b class="caret"></b>
           </a>
           <ul class="dropdown-menu">
              <li><a href="link1/">リンク１</a></li>
              <li><a href="link2">リンク２</a></li>
              <li><a href="link3">リンク３</a></li>
           </ul>
        </li>
  
   </ul>

<script>
$(window).resize(function(){
	
	$(function(){
	var w = $(window).width();
	var x = 970;
	if(w >= x)
	{

$(function () {
  $('#megabtn').hover(function(){
      $('#megabtn').toggleClass('is-active');
  });
}),
$(function () {
  $('#dropdown2').hover(function(){
      $('#dropdown2').toggleClass('open');
  });
})
	}
});	

});	
</script>

	div.megamenu {
	   display: none;
	   overflow: auto;
       position: absolute;
       top: 50px;
       left: 0;
       max-height: calc(100vh - 50px);
       padding: 1.5em 0 3em;
       z-index: 100;
	   width: 1180px;
	   margin-top:0!important;
}


	#megabtn.is-active div.megamenu {
       display: block;
       animation: show .5s ease 0s forwards;
        -webkit-animation: show .5s ease 0s forwards;
}

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題が再現しませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

[kaori314]

Lhankor_Mhy様
お返事をくださって、ありがとうございます。
簡潔にしようとして不要と思った部分を省いてしまったので、うまくお伝えが出来なくて、申し訳ありません。

↑今、こちらでテストしてみているのですが、
大変お手数ですが、もしよろしければ、こちらをご覧いただけませんでしょうか。
よろしくお願い致します<(_ _)>

[Lhankor_Mhy]

ページを拝見しました。

1 については問題が再現しませんでした。
2 については問題が再現しましたが、カーソルの位置にかかわらず、リロードしたか否かにかかわらず、問題が再現しました。

環境：Firefox102.0 Win10

[Lhankor_Mhy]

なお、ご提示のページは 970px 以下ではハンバーガーアイコンになっており、メガメニューが表示されませんでした。

[kaori314]

Lhankor_Mhy様
お忙しいところ早速のご確認をありがとうございます。
すみません、質問を描き間違えてしまっていました。。
正しくは「970px以上で動作させたい」です。
私が使っているブラウザはFireFoxバージョン 102.0 (64 ビット)、Windows 11です。

ブラウザによって動作が違ったりするのは、キャッシュを読み込んでいるからなのでしょうか。
ブラウザのキャッシュは設定から削除して、Shift + Ctrl + Rキー を押して再読み込みしているのですが、、

[Lhankor_Mhy]

かなりコツが必要な感じですが、1を再現することができました。
ページを読み込み終えてメガメニューが出現する瞬間にホバーアウトするような操作をする必要があるようです。Chromeでも、成功率は低いですが、同様のやり方で問題を再現することができました。

なお、2については、まだ再現できていません。

[kaori314]

Lhankor_Mhy様
ありがとうございます。説明不足で大変申し訳ありません。
ご指摘いただいたとおりで、わたしが確認するときにやってみた操作は↓です。

１．ページを読み込み終わるまでカーソルをli#megabtnにのせておく。
２．ページの読み込みが完全に終わった状態かつカーソルがli#megabtnにhoverしている状態。
（FireFoxでは、この時点でメガメニューが出現しません。Chrome、Edgeでは出現。）
３．li#megabtnにhoverしているカーソルをli#megabtnの外に移動する。するとFirefoxでは初めてメガメニューが出現。

上記の２と３で困っています。
原因がわかりますでしょうか。。(:_;)

[Lhankor_Mhy]

繰り返しになりますが、Firefoxでもマウスカーソル載せっぱなしでは問題が再現しませんでした。また、やり方を工夫すればChromeでも再現しています。

そして、やはり 2 は再現しませんでした。
kaori314 さんの環境で通常のやり方では、#megabtn 上にホバーした状態から、メガメニューにマウスを移動してもメニューが閉じないということですよね……？

Answer 1

　問題がなかなか再現しないのでアレですが、1 については、toggleClass()はクラスのつけ外しをしてしまうので状態がずれてしまうとずれっぱなしになってしまう、ということではないかと思います。

　とりあえず、ホバーインでaddClass()、ホバーアウトでremoveClass()を使うようにしてみてはどうでしょうか。

Comments

[kaori314]

Lhankor_Mhy様
＞＞ホバーインでaddClass()、ホバーアウトでremoveClass()を使う
困りごと１についてはこの方法で解決しました(^^)
分かりづらい説明にも関わらずお付き合いいただき、ありがとうございます。

困りごと２に関しては、処理速度の遅いPCで閲覧したときに起こってしまっているようです。
２については未解決ですが、ここで一旦質問を終了させていただきます。
助けていただき、本当にありがとうございました。