構建jQuery下拉菜單需要幫助

Question

我剛剛開始使用jQuery。我想做一個簡單的'ul'下拉菜單來提高我的理解。基本流程是這樣的：

'ul.menu li ul'顯示：none >>關於li懸停，獲得&存儲高度'this'ul >>設置'this'ul的高度爲0 >>集顯來阻止>>動畫高度原始存儲的高度

我知道已經有用於下拉列表一些偉大的插件，但我真的想推出自己得到更好的理解的jQuery。

到目前爲止，我已成功以下，非常做得不好（在這裏看到現場版 - http://jsbin.com/eduvi）：

---

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

// Get height of current hidden ul 

     $j("ul.menu li").hover(function() { 
      getHeight($j("ul", this).height()); 
     }); 
// Set height to 0px  

    $j('ul.menu li').hover(function() { 
    $j("ul", this).css({"height":"0px"}); 
}); 

// Set display to block 

    $j('ul.menu li').hover(function() { 
    $j("ul", this).css({"display":"block"}); 
}); 

// Animate height to stored height 

    $j('ul.menu li').hover(function getHeight(h) { 
    $j('ul:first', this).stop().animate({ "height" : "100%" } , 400); 
}); 

// Display height of current hidden ul 

    function getHeight(h) { 
     $j("div.test").text("The height for the hidden ul is " + h + "px."); } 
    }); 

---

我想知道我怎麼得到它使用存儲的原始高度，而不是100％。

其次，我敢肯定，這都可以降低冷凝成短短的幾行，但真的沒有線索如何做到這一點呢。

非常感謝任何幫助！

UPDATE： OK，所以我幾乎沒有。我使用Marve發佈的代碼作爲基礎，並在其他位中工作。唯一不起作用的是我需要將隱藏的UL的高度重新設置爲最初的高度，並將它的顯示設置爲無，因此它已準備好再次懸停。任何想法，爲什麼它不會工作？

---

$j('ul.menu > li').hover(
    function() { var ulHeight = $j('ul', this).height(); $j(this).children('ul').css({height: 0}).stop().animate({height: ulHeight}, 400); }, 
    function() { $j(this).children('ul').stop().animate({height: 0}, 400).css({height: ulHeight, display:none}); } 
); 

---

Answer 1

這裏有一個簡單的CSS提示，以幫助您：

使用$（ 'ul.menu>禮'），而不是僅僅$（ 'ul.menu禮'）

這將使懸停只針對您懸停在列表項下的菜單。

Answer 2

這是偉大的，你正在學習jQuery和利用這個問題來做到這一點。榮譽！

我認爲你是過度工程解決問題的解決方案。看看兩個內置的jQuery函數，這些函數有助於從解決方案中刪除一些工作：slideDown和slideUp。您無疑會在jQuery documentation中找到更多有用的功能。下面這段代碼做許多事，你貼什麼不已：

$j(document).ready(function() { 
    $j('ul.menu > li').hover(
     function() { $j(this).children('ul').stop(true, true).slideDown(); }, 
     function() { $j(this).children('ul').stop(true, true).slideUp(); } 
    ); 
}); 

的片段不處理你的HTML樣本中有子菜單，但由於你的學習慾望，它不應該是一個延伸到執行它。

也可參閱stop的文檔。