jquery - 悬停时导航链接的子菜单不会停留

Question

我有这个带链接的导航栏，悬停时会出现子菜单。我的问题是，在我的 jQuery 代码中，我只让 .nav-list 在悬停时显示和隐藏。我们如何让子菜单出现直到链接被点击？

$(document).ready(function() {
  $(this).find('.nav-list').hide();
  $('#main-navigation > li').hover(
    function() {
      $(this).find(".nav-list").show();
    },
    function() {
    $(this).find(".nav-list").hide();
    }
  );
  $(".nav-title").click(function() {
    var ww = $(window).width();
    if (ww > 640) {
      $(this).next().toggle();
      return false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="main-navigation">
  <li class="sub-menu">
    <a href="#" class="nav-title">학교소개</a>
    <div class="nav-list">
      <ul class="header-list">
        <li><a href="#">인사말</a></li>
        <li><a href="#">규정</a></li>
        <li><a href="#">캠퍼스 소개</a></li>
        <li><a href="#">찾아오시는 길</a></li>
      </ul>
    </div>
  </li>
  <li class="sub-menu">
    <a href="#" class="nav-title">전공안내</a>
    <div class="nav-list">
      <ul class="header-list">
        <li><a href="#">체육학</a></li>
        <li><a href="#">전공소개</a></li>
        <li><a href="#">졸업 후 진로</a></li>
        <li><a href="#">교육 프로그램</a></li>
        <li><a href="#">교수소개</a></li>
      </ul>
    </div>
  </li>
  <li class="sub-menu">
    <a href="#" class="nav-title">입학안내</a>
    <div class="nav-list">
      <ul class="header-list">
        <li><a href="#">모집요강</a></li>
        <li><a href="#">원서접수</a></li>
        <li><a href="#">입학문의</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div>
  </li>
  <li class="sub-menu">
    <a href="#" class="nav-title">학사안내</a>
    <div class="nav-list">
      <ul class="header-list">
        <li><a href="#">학점은행제</a></li>
        <li><a href="#">학사제도</a></li>
      </ul>
    </div>
  </li>
  <li class="sub-menu">
    <a href="#" class="nav-title">커뮤니티</a>
    <div class="nav-list">
      <ul class="header-list">
        <li><a href="#">공지사항</a></li>
        <li><a href="#">서식자료실</a></li>
      </ul>
    </div>
  </li>
</ul>

我希望我的输出发生的是当我悬停在一个链接上时，子菜单会出现，当我想点击一个子菜单时，子菜单链接将一直保留直到它不再悬停。

Answer 1

如果您希望在您将鼠标悬停在任何其他菜单列表之前显示您的子菜单，您必须修改您的 JavaScript

 $('#main-navigation > li').hover(
        function(){
            $(this).find(".nav-list").show();
        },
        function(){
            $(this).find(".nav-list").hide();
        }
    );

像下面这样的东西，

 $('#main-navigation > li').hover(
        function(){
            $('.nav-list').hide();
            $(this).find(".nav-list").show();
        }
    );

working Fiddle

更新:

我假设您正在为子菜单使用绝对定位并且远离菜单。这甚至在您到达子菜单之前就会触发悬停。尝试显示一段时间的超时，以便您可以到达子菜单

var HoverTimeOut;
  $(this).find('.nav-list').hide();
    $('#main-navigation > li').hover(
        function(){
            clearTimeout(HoverTimeOut);
            //$(this).find(".nav-list").show();
            $('.nav-list').hide();
            $(this).find(".nav-list").show();
        },
        function(){
            HoverTimeOut = setTimeout(function(){
            $('.nav-list').hide();
          }, 200)
            
        }
    );

Updated Fiddle