如何保持jquery下拉懸停內容打開時懸停下一個李類

Question

我上傳了一個網站的jquery下拉菜單，我想知道這是否可能，如果是這樣，如何？ 目前，當您將鼠標懸停在三個主要li類別中的任何一個上時，每個下方的下拉菜單都會展開，如果您將鼠標懸停在打開或懸停到另一個li類別的div上，菜單將關閉並顯示新內容。我想這樣做，一旦你將鼠標懸停並打開其中的任何一個，那麼如果你的鼠標滑過下一個，整個容器就不會收縮，而是調整新內容的新內容。我想要的示例是Nike.com 菜單，在任何時候您的鼠標位於導航區域，最後一個拖放內容仍然存在，並且如果您將鼠標懸停在新菜單項上，菜單不會摺疊，它會自動調整新的內容。

我成立了一個演示測試上的jsfiddle這裏http://jsfiddle.net/R7aTq/

$(function(){ 

    $('#navigation_horiz').naviDropDown({ 
     dropDownWidth: '300px' 
    }); 

    $('#navigation_vert').naviDropDown({ 
     dropDownWidth: '300px', 
     orientation: 'vertical' 
    }); 
}); 

Answer 1

這是我想出了一個解決方案：http://jsfiddle.net/JeremyGood/R7aTq/198/

您可能要添加一些動畫。此外，如果您玩過絕對定位，則可以將下拉列表與導航欄的寬度相同。

當然，我們基本上只是重寫了插件的下拉邏輯。在某個時候，它只是成爲您自己的自定義菜單代碼。

$(function(){ 

    $('#navigation_horiz').naviDropDown({ 
     dropDownWidth: '300px' 
    }); 

    $('#navigation_vert').naviDropDown({ 
     dropDownWidth: '300px', 
     orientation: 'vertical' 
    }); 

    var olddropdown = null; 

    $("#navigation_horiz>ul>li").unbind('mouseout'); 
    $("#navigation_horiz>ul>li").unbind('mouseover'); 
    $("#navigation_horiz>ul>li").bind("mouseout", function(event) { 
     olddropdown = $(this).find(".dropdown"); 
    }); 
    $("#navigation_horiz>ul>li").bind("mouseover", function(event) { 
     $(this).find(".dropdown").css('display', 'block'); 
     if (olddropdown != null) { 
      olddropdown.css('display', 'none'); 
      olddropdown = null; 
     } 
    }); 
    $("#navigation_horiz>ul").bind("mouseout", function(event) { 
     olddropdown.css('display', 'none'); 
     olddropdown = null; 
    }); 
});