Dropdownmenu延迟不工作

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有班级考试并且不是班级考试的孩子

doOpen和doClose必须先在conig中使用之前定义。

Answer 2

也许是在你打电话的功能，可能的顺序。

尝试的功能doOpen和doClose

$(function(){ 

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

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

    } 

    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)     
    }; 

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

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

});