javascript - Dropdown jQuery 父项的悬停延迟

Question

我正在尝试创建一个下拉菜单。这段代码是:

<script type="text/javascript">
  $(document).ready(function(e) {
    $('.has-sub').hover(function() {
      $(this).toggleClass("tap", 350, "easeOutSine");
    });
  });
</script>

<li class="has-sub">
  <a href="briefing.html">
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
  </a>
  <ul>
    <li>
      <a href="flightlog.html">
        <img src="images/share.png" id="menu-icons">Flight Log</a>
    </li>
    <li>
      <a href="loadsheet.html">
        <img src="images/weight.png" id="menu-icons">Loadsheet</a>
    </li>
    <li>
      <a href="#">
        <img src="images/compass.png" id="menu-icons">Alternates</a>
    </li>
    <li>
      <a href="#">
        <img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
    </li>
  </ul>
</li>

我想做的是为下拉列表的父级创建悬停延迟。您需要将鼠标悬停在“飞行简报”上 2 秒钟，下拉菜单才会出现。

我已经尝试了一些其他的解决方案，这些解决方案提供了不同的问题，但它们没有用。

Answer 1

你的 .hover() 函数有点错误 - 你需要一个 mouseenter 和 mouseleave 函数 - 我已经通过使用 setTimeout() 来设置一个 2000 毫秒(2 秒)的定时器来提供 2 秒的延迟(尽管在我看来那是在效果发生之前将鼠标悬停在元素上的时间真的很长)并让 mouseout 直接隐藏 ul。我展示了 ul buy habing .has-sub ul have a display:none 然后添加 .tap class- display:block。

$(document).ready(function(){
    $('.has-sub').hover(
      function(){setTimeout(function(){$('.has-sub').addClass("tap")},2000)},
      function(){$(this).removeClass("tap"); clearTimeout()}
      );
  });

.has-sub ul{display:none}
.tap ul{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
  <a href="briefing.html">
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
  </a>
  <ul>
    <li>
      <a href="flightlog.html">
        <img src="images/share.png" id="menu-icons">Flight Log</a>
    </li>
    <li>
      <a href="loadsheet.html">
        <img src="images/weight.png" id="menu-icons">Loadsheet</a>
    </li>
    <li>
      <a href="#">
        <img src="images/compass.png" id="menu-icons">Alternates</a>
    </li>
    <li>
      <a href="#">
        <img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
    </li>
  </ul>
</li>