基於jQuery的下拉導航菜單

Question

我正在嘗試創建動畫（幾乎）下拉菜單。 如果您查看我頁面的源代碼，則可以使用JS文件。 我基本上可以正常工作了。

我的問題是 ：當我將鼠標懸停在主菜單上的某個菜單上，然后直接向下轉到彈出（向下）的子菜單時，如果我將鼠標懸停在該菜單上的某個菜單上並保留它，則該菜單將保留。

http://lmiah.site11.com/slide%20down%20box%20menu%20new/mainTest.html

為了避免混淆，我將舉一個直接的例子 ：

如果將鼠標懸停在“職業介紹”上，然后直接移至上方，然后將鼠標懸停在“員工感言”上，然后將鼠標完全移出菜單，則菜單將保持不變，直到再次將鼠標懸停在“職業介紹”上。

任何幫助，將不勝感激！

編輯：我發現它與a href="# class="subMenuFloat"每當我將鼠標懸停在這些鏈接（它們是隱藏的下拉菜單中的鏈接）上時，下拉菜單div仍然存在。我找不到為什么發生了，但是如果我只是將鼠標懸停在li上，並且錯過了鏈接，則它會正確退出。

Answer 1

在jquery中使用懸停功能時，這是一個常見問題，因為您使用的選擇器實際上是從一個元素移動到另一個元素。 這是我這樣做的方法，基本上是在菜單的li內設置了div或li。 例：

<ul class="menu-hover">
  <li class="menu one">Menu Option One
    <div> Here is the drop down menu</div>
  </li>
  <li class="menu two">Menu Option One
    <div> Here is the drop down menu</div>
  </li>
</ul>

jQuery將是

基本上這就是說，當您將鼠標懸停在菜單中的li上方時，將所有div隱藏在該菜單下，這將是下拉菜單中的所有菜單，然后顯示懸停在li下方的div。 您需要將li位置設為相對位置，並將div設為絕對位置。 因此，理論上div包含在li下，因此當您將鼠標懸停時，它將保持打開狀態。

$(".menu-hover li").hover(function(){ 

 //Hide each div on hover
  $(".menu div").each(function(){
    $(this).hide();
  });

  $("div", this).show();
});

Answer 2

演示： http : //jsbin.com/welcome/13456

不用菜單插件的例子，這僅僅是概念證明

$(function() {
    var flag = false;
    $('#mainMenu li.mainMenuItems').hover(function() {
        if (!flag)
            $(this).find('.submenu').slideDown(500);

    }, function() {
        if (!flag)
            $(this).find('.submenu').slideUp(500);
    });

    $('#mainMenu li.mainMenuItems .submenu').hover(function() {
        flag = true;
    }, function() {
        $(this).slideUp(500);
        flag = false;
    });
});