使用jquery顯示/隱藏懸停/鼠標懸停下拉菜單

所以我有一個簡單的導航欄，當用戶在更多選項卡上懸停時，可以使用下拉菜單。我想隱藏下拉菜單，當用戶鼠標移出分類div。使用jquery顯示/隱藏懸停/鼠標懸停下拉菜單

問題是，當用戶將鼠標放入ul裏時，下拉框關閉。我如何設置它，以便函數忽略類別div中的ul li。嘗試類別> *但沒有工作。

<div id="navbar"> 
    <ul> 
    <li>tab1</li> 
    <li>tab2</li> 
    <li id="moretab">more</li> 
    </ul> 
</div> 
<div id="categories"> 
    <ul> 
    <li>cats</li> 
    <li>dogs</li> 
    </ul> 
</div> 

$("#moretab").hover(function(){ 
    $("#categories").css("visibility","visible"); 
}); 
$("#categories").mouseout(function() { 
    $("#categories").css("visibility","hidden"); 
});

來源

2009-06-12 Jung

最簡單的答案是，你會怎麼做沒有jQuery的：把下拉菜單中的觸發元件（例如下拉列表列表項在導航列表）。

如果你想要更簡單的東西，mouseleave可能會有所幫助。

來源

2009-06-12 21:23:03

鼠標離開正是我一直在尋找。謝謝！ – Jung 2009-06-12 21:43:08

$(document).ready(function() { 

    $("#moretab").mouseenter(function(){ 
    $("#categories").show(); 
    }); 

    $("#categories, #moretab").mouseleave(function(){ 
    $("#categories").hide(); 
    }); 
});

來源

2009-06-12 21:24:51 Sveisvei

這可能有幫助！首先隱藏「sub_menu」。

//html 

<ul> 
<li id = "menu"> <a href ="#"> Settings </a> 
    <ul id = "sub_menu"> 
    <li> <a href ="#"> page 1</a></li> 
    <li> <a href ="#"> page 2</a></li> 
    </ul> 
</li> 
<li>SomeLink</li> 
<li>SomeLink 2</li> 
</ul> 

//Javascript 

     $("#menu").hover(function() { 
      $("#sub_menu").show(); 
     }, function() { 
      $("#sub_menu").hide(); 
     });

來源

2012-07-25 21:32:43 bluwater2001

幾件事情：

把DIV的「#moretab」的內部，從而從菜單回捕鼠「更多」不會關閉它。

添加從鼠標離開的延遲，這是一個最好的用戶體驗

<div id="navbar"> 
    <ul> 
     <li>tab1</li> 
     <li>tab2</li> 
     <li id="moretab">more 
      <div id="categories"> 
       <ul> 
        <li>cats</li> 
        <li>dogs</li> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 

$("#moretab").hover(function(){ 
    $("#categories").slideDown("fast"); 
    clearTimeout(debounce); 
}); 

$("#moretab").mouseleave (function() { 
    debounce = setTimeout(closeMenu,400); 
}); 

var debounce; 
var closeMenu = function(){ 
    $("#categories").slideUp("fast"); 
    clearTimeout(debounce); 
} 

}); 
</script>

來源

2012-07-25 22:55:34 lars

jQuery的懸停插件包括了mouseenter和鼠標離開功能，下面的代碼爲我工作得很好。

的javascript：

$(document).ready(function(){ 
    $('.dropdown').hover(
    function(){ 
     $(this).children('.sub-menu').slideDown('fast'); 
    }, 
    function() { 
     $(this).children('.sub-menu').slideUp('fast'); 
    }); 
});

來源

2014-12-30 11:33:42

使用jquery顯示/隱藏懸停/鼠標懸停下拉菜單

回答

相關問題