Question

有一个下拉菜单，您需要对子菜单进行延迟。

这是我目前实施的[例子] [1]。

只要按钮鼠标结束，使用clearTimeout启动倒计时直到菜单出现，如果光标从按钮中移除，则使用Transition取消超时。

无法理解为什么它不起作用。

display: none未与{{1}}合作，因此这不是一个选项。

如何修复以使其正常工作？

Answer 1

CSS transition无法与display: block;或display: none;一起使用。您可以使用jQuery .delay()：

＆＃13;

$(function () {
  $("ul").hide();
  $("a").mouseover(function () {
    $("ul").delay(1000).fadeIn();
  });
});

＆＃13;

a {display: inline-block; text-decoration: none; padding: 5px; color: #000; border: 1px solid #ccc; border-radius: 3px; line-height: 1;}
.btn {margin-bottom: -1px;}
ul, li {margin: 0; padding: 0; list-style: none; border: 1px solid #ccc;}
ul {padding: 5px; background-color: #fff; width: 100px;}
ul li a {display: block; border-width: 0; border-top-width: 1px; border-radius: 0}
ul li:first-child a {border-top: 0;}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<a href="#" class="btn">Menu</a>
<ul>
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
</ul>

＆＃13;

如何制作带延迟的下拉菜单（JS）？

1 个答案: