javascript - 如何在打开下拉悬停菜单时设置 1 秒延迟？

Question

我已经在网上阅读了一段时间的东西，但还没有想出使用 setTimeout 函数的正确方法。有什么原因吗？

JSFIDDLE

$('.drop-down').click(function() {
    $(this).hide();
});
$('.nav-main li ul').hide().removeClass('.drop-down');
setTimeout(function() {
$('.nav-main li').hover(
  function openDrop() {
    $('ul', this).stop().slideDown(1000);
  }, 
  function closeDrop() {
    $('ul', this).stop().slideUp(1000);
  }
);}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
  <ul>
    <li class="nav-top"><a href="#welcome">Welcome</a></li>
    <li class="nav-top"><a href="#about">About</a>
		<ul class="drop-down">
			<li><a href="#about">Services</a></li>
			<li><a href="#client">Clients</a></li>
			<li><a href="#press">Press</a></li>
			<li><a href="#leadership">Leadership</a></li>
			<li><a href="#twitter">Twitter</a></li>
		</ul>
	</li>
	<li class="nav-top"><a href="#contact">Contact</a>    </li>
  </ul>
						
</nav>

Answer 1

这种情况下可以使用JQuery的delay()方法，不需要setTimeout

$('ul', this).stop().delay(1000).slideDown(1000);

查看更新的 fiddle :https://jsfiddle.net/8xtxxk35/3/