2

ドロップダウン メニューの背景として機能する 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;
}

どんな助けでも大歓迎です！

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 に答える