Question

我在重新定义作为下拉菜单背景的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;
}

非常感谢任何帮助！

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

});

无法在滑动菜单中重新定义div高度

1 个答案: