2

我在重新定义用作下拉菜单背景的 div 的 height 属性时遇到了麻烦。想法是当你点击列表中的一个项目时，嵌套列表和背景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;
}

任何帮助深表感谢！

4

1 回答 1

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");

});
于 2012-12-26T22:07:26.500 回答