已更新：

Question

我有一个带有链接的导航栏，将其悬停时会出现子菜单。我的问题是，在我的jQuery代码中，我只让.nav列表在悬停时显示和隐藏。在单击链接之前，如何使子菜单出现？

$(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

从下面的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 2

如果要在子菜单上一直显示子菜单，则必须修改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 3

在@Xenio Gracias上进行一些调整，而不是删除空白边距，只需将空白边距更改为自动

.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;
}

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

3 个答案:

已更新：