jquery - 下拉菜单延迟不起作用

Question

我的下拉菜单需要延迟。我尝试使用 hoverintent 但它不起作用，找不到我的错误。

我的 CSS:

CSS

我的下拉列表:

<div id="menu" class="menu"><ul><li class="first"><a href=index.php" title="Home"     >Home</a></li>
<li><a href="index.php?id=13" title="Verein" >Verein</a><ul><li class="first"><a href="index.php?id=33" title="Vorstand" >Vorstand</a></li>
<li><a href="index.php?id=5" title="Mitglieder" >Mitglieder</a></li>
<li class="last"><a href="index.php?id=6" title="Anfahrt" >Anfahrt</a></li>
</ul></li>
<li><a href="index.php?id=7" title="Kontakt" >Kontakt</a><ul><li class="first"><a href="/content/Anmeldung_OG_Schau_17_06_2012.doc" title="Ortsgruppenschau"     >Ortsgruppenschau</a>/li>
</ul></li>
<li><a href="index.php?id=16" title="Hunde" >Hunde</a><ul><li class="first"><a href="index.php?id=10" title="Hundeschule" >Hundeschule</a></li>
<li><a href="index.php?id=9" title="Hundesport" >Hundesport</a></li>
<li class="last"><a href="index.php?id=31" title="Rassen" >Rassen</a><ul><li class="first"><a href="index.php?id=19" title="Riesenschnauzer" >Riesenschnauzer</a></li>
<li><a href="index.php?id=20" title="Schnauzer" >Schnauzer</a></li>
<li><a href="index.php?id=28" title="Zwergschnauzer" >Zwergschnauzer</a></li>
<li><a href="index.php?id=29" title="Deutscher Pinscher" >Deutscher Pinscher</a></li>
<li><a href="index.php?id=30" title="Zwergpinscher" >Zwergpinscher</a></li>
<li class="last"><a href="index.php?id=32" title="Affenpinscher" >Affenpinscher</a></li>
</ul></li>
</ul></li>
<li><a href="index.php?id=25" title="Galerie" >Galerie</a></li>
<li><a href="index.php?id=27" title="Presse" >Presse</a></li>
<li><a href="index.php?id=34" title="Termine" >Termine</a></li>
<li class="active"><a href="index.php?id=35" title="Links" >Links</a></li>
<li class="last"><a href="index.php?id=36" title="Impressum" >Impressum</a></li>
</ul></div></div>

我的 js 调用:

$(function(){

var config = {    
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 200,  // number = milliseconds for onMouseOver polling interval    
     over: doOpen,   // function = onMouseOver callback (REQUIRED)    
     timeout: 2000,   // number = milliseconds delay before onMouseOut    
     out: doClose    // function = onMouseOut callback (REQUIRED)    
};

function doOpen() {
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
}

function doClose() {
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
    alert("test");
}

$(".menu ul li").hoverIntent(config);

$(".menu ul li ul li:has(ul)").find("a:first").append(" » ");

});

如果我浏览下拉菜单，它会说测试，所以它找到了功能并且没有错误，但它不起作用。我怎样才能解决这个问题？

演示:Demo

Answer 1

三件事。

您的 CSS 在没有 JS 的情况下也能正常工作。您需要将下拉列表 ul 的 :hover 重写为 .hover

在演示中，您有 $(".test ul li") 而不是 $(".menu ul li")。不会工作，因为 ul 有类测试并且不是类测试的 child

doOpen 和 doClose 必须在配置之前定义。