不能完成下拉菜單

Question

所以我花了很多時間在這個上，並且已經到了最後的部分，似乎無法使我的下拉功能。

我正在使用jQuery懸停。將鼠標懸停在主鏈接上，會出現子鏈接，並且內容向下移動，將鼠標懸停在具有子項的子鏈接上，並且出現子子鏈接，並且內容向下移動一些，但是當我將鼠標懸停在子子鏈接上時，我的內容向上移動但子子鏈接仍然可見。

我有幾個理論可以幫助我解決這個問題，其中之一就是使用子函數而不是兩個不同的函數。另一種是使用case語句來移動內容，但我有一種感覺，如果我簡化了我的代碼，我最終也可以解決問題。

這裏是我的jQuery：

$(document).ready(function() { 
    $(".main-menu-link").hover(function() { 
     $(".main-menu-link").removeClass("active"); 
     $(this).addClass("active"); 
     //$(".menu-depth-1").hide(); 
     $(this).parent().siblings().children('ul').hide(); 
     // 
     $(this).siblings(".menu-depth-1").fadeIn(); 
     if ($(this).siblings('ul').is(":visible")) { 
      $("#index-content").animate({ 
       'margin-top': 46 
      }); 
      alert('doh'); 
     } else { 
      $("#index-content").animate({ 
       'margin-top': 10 
      }); 
     } 

    }); 
    $(".sub-menu-link").hover(function() { 
     $(".sub-menu-link").removeClass("active"); 
     $(this).addClass("active"); 
     $(this).parent().siblings().children('ul').hide(); 
     $(this).siblings(".menu-depth-2").fadeIn(); 
     if ($(this).siblings('ul').is(":visible")) { 
      $("#index-content").animate({ 
       'margin-top': 92 
      }); 
     } else { 
      $("#index-content").animate({ 
       'margin-top': 46 
      }); 
     } 
    }); 

}); 

而這裏的jsfiddle：

http://jsfiddle.net/8tcQT/4/

感謝您的幫助，並感謝您的閱讀。

Ç

Answer 1

$(".sub-menu-link").hover(function() { 

這條線就是爲什麼細分子鏈接導致內容向上移動的原因，因爲這兩個子鏈接和細分子鏈接觸發器，懸停功能。

$(".sub-menu-link").hover(function() { 
    $(".sub-menu-link").removeClass("active"); 
    $(this).addClass("active"); 

    // I added the following line: 
    $(this).siblings().find('.sub-menu-link').off('mouseenter mouseleave'); 

    $(this).parent().siblings().children('ul').hide(); 
    $(this).siblings(".menu-depth-2").fadeIn(); 
    if ($(this).siblings('ul').is(":visible")) { 
     $("#index-content").animate({ 
      'margin-top': 92 
     }); 
    } else { 
     $("#index-content").animate({ 
      'margin-top': 46 
     }); 
    } 
}); 

隨着代碼行添加，它會從子 - 子鏈接當它們的父子鏈接首先徘徊懸停功能。

或者，對於子分支鏈接使用其他分類名稱而不是class="sub-menu-link"。

請注意，我的解決方案僅解決在子級鏈接級別發現的問題。如果需要甚至更深的鏈路列表，即子子鏈路和子子子鏈路，則如您所說，創建「子功能」將是優選的。