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