jQueryで２つの要素のどちらかからマウスが外れた時の処理

Question

下記に記載しているコードでメガメニューを作成しているのですが、
hover時の表示は成功したのですが、マウスアウトした時の処理が上手くいきません。。

liか、.menu内にマウスがあるときは、display-onのクラスを付与した状態を保持し、
どちらにもマウスが乗っていないときにdisplay-onを削除したいと考えております。

jQueryやJavaScriptの知識がある方は簡単かもしれませんが、
ご教示いただけると幸いです。

よろしくお願いいたします。

■css

.menu,
.menu2 {
  display: none;
}
.display-on {
  display: block;
}

■js

$(function(){
  $("ul li:nth-child(1)").hover(function() {
    $('.menu').addClass('display-on');
  });
  $("ul li:nth-child(1)" || "menu").mouseleave(function() {
    $('.mega-menu').removeClass('display-on');
  });
  $("ul li:nth-child(2)").hover(function() {
    $('.menu').addClass('display-on');
  });
  $("ul li:nth-child(2)" || "menu").mouseleave(function() {
    $('.mega-menu').removeClass('display-on');
  });
});

■html

<ul>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

<div class="menu">
  <p></p>
</div>
<div class="menu2">
  <p></p>
</div>

Answer 1

メニューが増えたときのことを考えておかないと、あとあと面倒なことになるのではないでしょうか？

<ul>
  <li data-related=".menu">テキスト</li>
  <li data-related=".menu2">テキスト</li>
</ul>
<div class="mega-menu menu">
  <p>menu</p>
</div>
<div class="mega-menu menu2">
  <p>menu2</p>
</div>

$(document).on('mouseover', function(event) {
  let target = $(event.target);
  let related = target.closest('[data-related]');
  let menu = related.length ? $(related.attr('data-related'))[0] : target.closest('.mega-menu')[0];

  $('.mega-menu').each(function(index, element) {
    $(element).toggleClass('display-on', element === menu);
  });
});

Comments

[jyoze]

ありがとうございます。
ご記載いただいたJSの内容がほとんどわからないですが、無事に動きました！
記載内容については調べながら少しずつ理解していこうと思います。
ありがとうございました。

Answer 2

.mega-menuは.menu2なのでしょうか？

liか、.menu内にマウスがあるとき

liから外れた時に消えてしまうので.menu内にマウスを載せることはできないでは？
もう少し状況を整理して情報を追記して下さい
ちなみにhoverは乗ったときとハズレた時のコールバックを２つ指定します

$(function(){
  $("ul li:eq(0)").hover(
    function() {
      $('.menu').addClass('display-on');
    },
    function(){
      $('.menu').removeClass('display-on');
    });
  $("ul li:eq(1)").hover(
    function() {
      $('.menu2').addClass('display-on');
    },
    function(){
      $('.menu2').removeClass('display-on');
    });
});

<ul>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

<div class="menu">
  <p>test1</p>
</div>
<div class="menu2">
  <p>test2</p>
</div>

Comments

[jyoze]

ご教示ありがとうございます。
説明不足で申し訳ありません。
確かに、liから外れると消えてしまうので、.menu内にマウスを載せることができません。
状況としましては、フロント画面で見るとliのhover時にliの真下に.menuのボックスが表示されます。
つまり、liと.menuはフロント画面では繋がっており、必ずどちらかにマウスが当たっている状態を維持できます。
その維持状態の時に、消えないようにしたいのと、どちらにもマウスが載っていない時は消える状態にしたいと考えております。
動きとしましては、一般的なメガメニューと同じだと思います。
説明がわかりにくいかと思いますが、ご教示いただけると幸いです。