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

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

Answer 2

从下面的 CSS 中删除 margin-top: 36px;：

.nav-list {
    display: none;
    position: absolute;
    background-color: #2a2a2a;
    min-width: 125px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* margin-top: 36px; */ 
    bottom:0;
    overflow: hidden;
}

Answer 3

稍微调整@Xenio Gracias 的回答，而不是删除margin-top，只需将margin 更改为auto

.nav-list {
    display: none;
    position: absolute;
    background-color: #2a2a2a;
    min-width: 125px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin:auto;
    overflow: hidden;
}