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>

我要做的是为Dropdown的父级创建一个悬停延迟。您需要将鼠标悬停在“飞行简报”上2秒钟才能显示下拉菜单。

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

Answer 1

你的.hover（）函数有点不对 - 你需要一个mouseenter和mouseleave函数 - 我已经设置了一个2000 ms（2s）的计时器，通过使用setTimeout（）来给出2秒的延迟（虽然我认为这是很长一段时间在事件发生之前悬停在一个元素上）并让mouseout直接隐藏ul。我正在展示ul buy habing .has-sub ul有一个display：none然后添加.tap class-display：block。

＆＃13;

find /path -type d -empty -delete

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你走了。如果您还有其他需要，请告诉我。

$('.link').mouseenter(function(){
  int = setTimeout(() => {
    $('.dropdown').fadeIn();
  }, 2000);
}).mouseleave(function(){
  clearTimeout(int);
});

.dropdown {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<li class="has-sub">
  <a href="briefing.html" class='link'>
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
  </a>
  <ul class='dropdown'>
    <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>

Dropdown jQuery的父级悬停延迟

2 个答案: