ナビゲーションから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

総合スコア36960

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