在滑動菜單中重新定義div高度時遇到問題

Question

我無法重新定義作爲下拉菜單背景的div的高度屬性。這個想法是，當你點擊列表中的一個項目時，嵌套列表和背景div會滑出，然後如果你點擊主列表中的另一個項目，第一個嵌套列表和背景div會向上滑動，新列表和背景div然後滑下來。我的小心是背景div高度沒有得到重新定義，並且它保持了第一個列表的高度。這裏是我的jQuery：

$(function() { 

    $("ul.hmenu li a").click(function() { 

     var parentUlHeight = $("ul.hmenu").outerHeight(true) - 1; 
     var newUlHeight, oldUlHeight; 

     // REMOVE OLD SELECTION 
     $(".currentSelection").siblings('ul').slideUp("fast"); //find old selection and slide up its sibling ul 
     oldUlHeight = $(".currentSelection").siblings('ul').height(); 
     $('#subnavdiv').slideUp("fast"); 
     $(".currentSelection").removeClass("currentSelection"); //remove the class from the old selection 


     // MAKE NEW CURRENT SELECTION 
     $(this).addClass("currentSelection"); 
     newUlHeight = $(".currentSelection").siblings('ul').height(); //calc height of new current selection subnav 
     $(this).siblings('ul').slideDown("slow"); 

     // ANIMATE DIV BACKGROUND 
     $('#subnavdiv').css("top", parentUlHeight + "px"); //position div at right height 

     $('#subnavdiv').height(newUlHeight); // set height to new selection height -- NOT WORKING 
     $('#subnavdiv').slideDown("slow"); 

    }); 
}); 

HTML：

<nav class="nav clearfix desktop-nav" style="left: 146px;"> 
    <ul class="hmenu"> 
     <li class="item-103 current active"><a href="#">Home</a> 
     <li class="item-105 deeper parent"> 
      <a href="#">Our Team</a> 
      <ul class="hmenu-left-to-right" style=""> 
       <li class="item-145">link</li> 
       <li class="item-146">link</li> 
      </ul> 
     </li> 
    </ul> 
    <div id="subnavdiv"></div> 

CSS

#subnavdiv { 
width: 900px; 
background: #607852; 
display: none; 
position: absolute; 

-webkit-border-radius: 0 0 25px 25px; 
-moz-border-radius: 0 0 25px 25px; 
border-radius: 0 0 25px 25px; 
} 

任何幫助，非常感謝！

Answer 1

這應該讓你接近你在找什麼 http://jsfiddle.net/F9De4/

你可能反而給你的錨標記添加一個類名".main-link"而不是"ul.hmenu li a"

$(".main-link").toggle(function(){ 

    var newUlHeight = $(this).parent().find(".hmenu-left-to-right").height(); 

    $(this).parent().find(".hmenu-left-to-right").hide("fast"); 

    $('#subnavdiv').hide(); 

    $("#subnavdiv").css("height",newUlHeight); 
    $('#subnavdiv').slideDown("slow"); 

},function(){ 

    var newUlHeight = $(this).parent().find(".hmenu-left-to-right").height(); 
    $(this).parent().find(".hmenu-left-to-right").show("fast"); 

    $('#subnavdiv').hide(); 

    $("#subnavdiv").css("height",newUlHeight); 
    $('#subnavdiv').slideDown("slow"); 

});