質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

kaori314
kaori314

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

2クリップ

166閲覧

投稿2022/07/04 07:23

編集2022/07/06 13:29

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

【困りごと1】

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

【困りごと2】

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

HTML

<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>商品カテゴリ1</dt> <dd> <ul> <li><a href="products/01/"><img class="res" src="/images/products01.png" alt="商品1"><span>商品1</span></a></li> <li><a href="products/02/"><img class="res" src="/images/products02.png" alt="商品2"><span>商品2</span></a></li> <li><a href="products/03/"><img class="res" src="/images/products03" alt="商品3"><span>商品3</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/"> メニュー2<b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="link1/">リンク1</a></li> <li><a href="link2">リンク2</a></li> <li><a href="link3">リンク3</a></li> </ul> </li> </ul>

JavaScript

<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>

CSS

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; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy

2022/07/05 01:33

ご提示のコードを試してみましたが、問題が再現しませんでした。 おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
kaori314

2022/07/06 04:28 編集

Lhankor_Mhy様 お返事をくださって、ありがとうございます。 簡潔にしようとして不要と思った部分を省いてしまったので、うまくお伝えが出来なくて、申し訳ありません。 ↑今、こちらでテストしてみているのですが、 大変お手数ですが、もしよろしければ、こちらをご覧いただけませんでしょうか。 よろしくお願い致します<(_ _)>
Lhankor_Mhy

2022/07/05 05:21

ページを拝見しました。 1 については問題が再現しませんでした。 2 については問題が再現しましたが、カーソルの位置にかかわらず、リロードしたか否かにかかわらず、問題が再現しました。 環境:Firefox102.0 Win10
Lhankor_Mhy

2022/07/05 05:25

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

2022/07/05 05:54 編集

Lhankor_Mhy様 お忙しいところ早速のご確認をありがとうございます。 すみません、質問を描き間違えてしまっていました。。 正しくは「970px以上で動作させたい」です。 私が使っているブラウザはFireFoxバージョン 102.0 (64 ビット)、Windows 11です。 ブラウザによって動作が違ったりするのは、キャッシュを読み込んでいるからなのでしょうか。 ブラウザのキャッシュは設定から削除して、Shift + Ctrl + Rキー を押して再読み込みしているのですが、、
Lhankor_Mhy

2022/07/05 06:00

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

2022/07/05 06:33

Lhankor_Mhy様 ありがとうございます。説明不足で大変申し訳ありません。 ご指摘いただいたとおりで、わたしが確認するときにやってみた操作は↓です。 1.ページを読み込み終わるまでカーソルをli#megabtnにのせておく。 2.ページの読み込みが完全に終わった状態かつカーソルがli#megabtnにhoverしている状態。 (FireFoxでは、この時点でメガメニューが出現しません。Chrome、Edgeでは出現。) 3.li#megabtnにhoverしているカーソルをli#megabtnの外に移動する。するとFirefoxでは初めてメガメニューが出現。 上記の2と3で困っています。 原因がわかりますでしょうか。。(:_;)
Lhankor_Mhy

2022/07/05 07:28 編集

繰り返しになりますが、Firefoxでもマウスカーソル載せっぱなしでは問題が再現しませんでした。また、やり方を工夫すればChromeでも再現しています。 そして、やはり 2 は再現しませんでした。 kaori314 さんの環境で通常のやり方では、#megabtn 上にホバーした状態から、メガメニューにマウスを移動してもメニューが閉じないということですよね……?

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。