ナビゲーションからmouseleave時にメガメニューを閉じる方法

jQueryでメガメニューを作っています。
下記のようなコードで途中まで実装しています。

HTMLcss
1<style>
2ul,li{
3  width: 100%;
4  margin: 0;
5  padding: 0;
6  list-style: none;
7}
8a{
9  display: block;
10  line-height: 80px;
11  text-align: center;
12}
13.wrapper{
14  width: 1280px;
15  margin: auto;
16  background: #eee;
17}
18.nav{
19  display: flex;
20}
21.navlink.is-active a{
22  background: #ddd;
23}
24.megamenu{
25  display: none;
26}
27.megamenu a{
28  background: #ddd;
29}
30.megamenu.is-active{
31  display: block;
32}
33</style>
34
35<div class="wrapper">
36  <ul class="nav">
37    <li class="navlink" data-menu="megamenu1"><a href="">nav1</a></li>
38    <li class="navlink" data-menu="megamenu2"><a href="">nav2</a></li>
39    <li class="navlink" data-menu="megamenu3"><a href="">nav3</a></li>
40  </ul>
41  <div>
42    <ul class="megamenu megamenu1">
43      <li><a href="">menu1</a></li>
44      <li><a href="">menu1</a></li>
45      <li><a href="">menu1</a></li>
46    </ul>
47    <ul class="megamenu megamenu2">
48      <li><a href="">menu2</a></li>
49      <li><a href="">menu2</a></li>
50      <li><a href="">menu2</a></li>
51    </ul>
52    <ul class="megamenu megamenu3">
53      <li><a href="">menu3</a></li>
54      <li><a href="">menu3</a></li>
55      <li><a href="">menu3</a></li>
56    </ul>
57  </div>
58</div>

jQuery
1$(function(){
2
3  const navlink = $('.navlink');
4  const megamenu = $('.megamenu')
5
6  function navToggle(e, self) {
7    if (e == true) {
8      $(navlink).removeClass('is-active');
9      $(megamenu).removeClass('is-active');
10      $(self).addClass("is-active");
11      let activeNav = "." + $(self).attr("data-menu");
12      $(activeNav).addClass("is-active");
13    } else {
14      $(navlink).removeClass('is-active');
15      $(megamenu).removeClass("is-active");
16    }
17  }
18  // Open
19  $(navlink).mouseenter(
20    function () {
21      let self = this;
22      navToggle(true, self)
23    }
24  )
25  // Close
26  $(megamenu).mouseleave(
27    function () {
28      navToggle(false)
29    }
30  )
31})

メガメニューにカーソルと持っていこうとすると同時にnavからmouseleaveしてしまい、メガメニューが閉じてしまうので一旦上記のようにしています。
この実装だとnavから直にmouseleaveした時にメガメニューが閉じないため、どうしたら良いか考え込んでいます。

試しに下記のようにしてみましたが、当然メガメニューにhoverする前に消えてしまいます。
mouseleave時にカーソルがメガニューにhoverしていたら閉じない、などのif条件を書けばいいのでしょうか？

jQuery
1  // Open
2  $(navlink).hover(
3    function () {
4      let self = this;
5      navToggle(true, self)
6    },
7    function () {
8      navToggle(false)
9    }
10  )

行動規範の内容に同意します

回答2件

ご希望の答えとは違うかもしれませんが、CSSのみで作るとこんな感じになります。

css
1  <style>
2    ul,
3    li {
4      width: 100%;
5      margin: 0;
6      padding: 0;
7      list-style: none;
8    }
9
10    a {
11      display: block;
12      line-height: 80px;
13      text-align: center;
14    }
15
16    .wrapper {
17      width: 1280px;
18      margin: auto;
19      background: #eee;
20    }
21
22    .nav {
23      display: flex;
24      position: relative;
25    }
26
27    .navlink:hover a {
28      background: #ddd;
29    }
30
31    .megamenu {
32      display: none;
33      position: absolute;
34      left: 0;
35    }
36
37    .megamenu a {
38      background: #ddd;
39    }
40
41    .navlink:hover>.megamenu {
42      display: block;
43    }
44  </style>
45
46  <div class="wrapper">
47    <ul class="nav">
48      <li class="navlink" data-menu="megamenu1"><a href="">nav1</a>
49        <ul class="megamenu megamenu1">
50          <li><a href="">menu1</a></li>
51          <li><a href="">menu1</a></li>
52          <li><a href="">menu1</a></li>
53        </ul>
54      </li>
55      <li class="navlink" data-menu="megamenu2"><a href="">nav2</a>
56        <ul class="megamenu megamenu2">
57          <li><a href="">menu2</a></li>
58          <li><a href="">menu2</a></li>
59          <li><a href="">menu2</a></li>
60        </ul>
61      </li>
62      <li class="navlink" data-menu="megamenu3"><a href="">nav3</a>
63        <ul class="megamenu megamenu3">
64          <li><a href="">menu3</a></li>
65          <li><a href="">menu3</a></li>
66          <li><a href="">menu3</a></li>
67        </ul>
68      </li>
69    </ul>
70  </div>

jQueryでも同様に、マウスイベントを親要素に伝播させて処理すると上手くいくのではないかと思いました。

投稿2021/09/08 01:23

総合スコア36163

2021/09/12 13:34

回答ありがとうございます。自己解決しましたがCSSのみの方がシンプルでいいかなと思いました。

行動規範の内容に同意します

自己解決

こちらの記事を参考に自己解決しました。
https://unity-yuji.xyz/jquery-hover-close-dropdown-menu/

mouseleave時にhoverしている要素を取得しメガメニューにhoverしていればhoverフラグをtrueにする
trueであれば閉じない、falseであれば閉じる

としたところ希望の挙動になりました。

HTMLcssjQuery
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <style>
5    ul,li{
6      width: 100%;
7      margin: 0;
8      padding: 0;
9      list-style: none;
10    }
11    a{
12      display: block;
13      line-height: 80px;
14      text-align: center;
15    }
16    .wrapper{
17      width: 980px;
18      margin: auto;
19      background: #eee;
20    }
21    .nav{
22      display: flex;
23    }
24    .navlink.is-active a{
25      background: #ddd;
26    }
27    .megamenu{
28      display: none;
29    }
30    .megamenu a{
31      background: #ddd;
32    }
33    .megamenu.is-active{
34      display: block;
35    }
36    </style>
37    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
38    <script>
39    $(function(){
40
41      const nav = $('.nav');
42      const navlink = $('.navlink');
43      const megamenu = $('.megamenu')
44
45      function navToggle(e, self) {
46        if (e == true) {
47          $(navlink).removeClass('is-active');
48          $(megamenu).removeClass('is-active');
49          $(self).addClass("is-active");
50          let activeNav = "." + $(self).attr("data-menu");
51          $(activeNav).addClass("is-active");
52        } else {
53          $(navlink).removeClass('is-active');
54          $(megamenu).removeClass("is-active");
55        }
56      }
57      // Open
58      $(navlink).mouseenter(
59        function () {
60          let self = this;
61          navToggle(true, self)
62        }
63      )
64      $(nav).mouseleave(
65        function () {
66          let hovering = false;
67          $(":hover").each(function () {
68            if ($(this).hasClass("is-active")) {
69              hovering = true;
70            }
71          })
72          if (!hovering) {
73            navToggle(false);
74          }
75        }
76      )
77      // Close
78      $(megamenu).mouseleave(
79        function () {
80          navToggle(false)
81        }
82      )
83    })
84    </script>
85  </head>
86  <body>
87    <div class="wrapper">
88      <ul class="nav">
89        <li class="navlink" data-menu="megamenu1"><a href="">nav1</a></li>
90        <li class="navlink" data-menu="megamenu2"><a href="">nav2</a></li>
91        <li class="navlink" data-menu="megamenu3"><a href="">nav3</a></li>
92      </ul>
93      <div>
94        <ul class="megamenu megamenu1">
95          <li><a href="">menu1</a></li>
96          <li><a href="">menu1</a></li>
97          <li><a href="">menu1</a></li>
98        </ul>
99        <ul class="megamenu megamenu2">
100          <li><a href="">menu2</a></li>
101          <li><a href="">menu2</a></li>
102          <li><a href="">menu2</a></li>
103        </ul>
104        <ul class="megamenu megamenu3">
105          <li><a href="">menu3</a></li>
106          <li><a href="">menu3</a></li>
107          <li><a href="">menu3</a></li>
108        </ul>
109      </div>
110    </div>
111  </body>
112</html>
113

投稿2021/09/12 13:42

N35

総合スコア7

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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

ナビゲーションからmouseleave時にメガメニューを閉じる方法

関連した質問