js'切换'或'悬停'功能？

Question

我不想使用toggle，我需要使用什么来获取以下nav结构，以便在主链路悬停时保持放置状态？

当前JS：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".downservices").hover(function(){ 
     $(".servicesdropped").toggle("fast"); 
    }); 
    }); 
</script> 

Sample page

（请注意，当子菜单弹出，我不能点击链接，子菜单中消失）

Answer 1

使用这样

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".downservices").hover(function(){ 
$(".servicesdropped").slideDown(); 
}); 
}); 
</script> 

用于悬停菜单消失使用此

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".downservices").hover(
function(){ 
$(".servicesdropped").slideDown(); 
}, 
function(){ 
$(".servicesdropped").slideUp(); 
} 
); 
}); 
</script> 

Answer 2

如果您对动画没有兴趣，并且希望使用JQuery，则可以在类上切换CSS可见性规则。

$(document).ready(function() 

// Make sure the item is hidden initially, best to do 
// this in CSS. 
$(".servicesdropped").css("visibility", "hidden"); 

{ 
    $(".downservices").hover(function() 
    { 
     $(".servicesdropped").css("visibility", "display"); 
    }, 
    function() 
    { 
     $(".servicesdropped").css("visibility", "hidden"); 
    }); 
}); 

使用可视性意味着元素仍然会消耗它在DOM但不显示，确保结构和周围其他元件的定位被留在间歇的空间。缺点是动画，如fadeIn()和​​将无法​​正常工作。

Answer 3

菜单中的HTML标记架构应该是这样的：

<ul> 
    <li class="downservices"><a href="#">GUYS</a> 
    <div class="servicesdropped" style="display: none;"> 
     <ul class="middle"> 
     <h3>Shirts &amp; Tanks:</h3> 
     <li><a href="#">MuSkull</a></li> 
     <li><a href="#">Bamboo Athletic Tank</a></li> 
     <li><a href="#">Thin Strap Tank</a></li> 
    </ul> 

    <ul class="right"> 
     <h3>Other Stuff:</h3> 
     <li><a href="#">Shorties</a></li> 
     <li><a href="#">Hoodies</a></li> 
     <li><a href="#">Socks</a></li> 
     <li><a href="#">Hats</a></li> 
    </ul> 
    </div> 
    </li> 
    <li><a href="#">products</a></li> 
    <li><a href="#">portfolio</a></li> 
    <li><a href="#">contact</a></li> 
</ul> 

而在脚本中使用此：

$(document).ready(function(){ 
    $("li.downservices").hover(function() 
    { 
     $(this).find(".servicesdropped").slideDown("fast"); 
    }, 
    function() 
    { 
     $(this).find(".servicesdropped").slideUp("fast"); 
    }); 
});