javascript - 下拉菜单高度的 CSS 和 jQuery 问题

Question

所以我制作了一些下拉菜单。下拉列表是 ul 嵌套在 li 中。出于样式原因，我需要在页面首次加载时将下拉高度设置为 0px 并带有一些填充。我所有的下拉菜单都有不同的高度。当我也将 100% 作为高度设置为动画时，它不起作用。

这是一个链接:http://www.jasonfoumberg.com/test/writing.html

如何让下拉菜单动画到适当的高度。每个下拉菜单都有不同数量的元素。

jQuery

$(document).ready(function () {
    var defHeight = $('ul:first', this).height();
    console.log(defHeight);

    $("ul li").hover(

    function () {

        $('ul:first', this).animate({
            height: "100%"
        });
    }, function () {
        $('ul:first', this).animate({
            height: "0px"
        });
    });
});​

HTML

<div id="mainWrapperContent">
    <div id="writingMenu">
            <ul>
            <li><a href="">critical reviews</a>
                <ul>
                    <li><a href="">frieze</a></li>
                    <li><a href="">Modern Painters</a></li>
                    <li><a href="">photograph</a></li>
                    <li><a href="">sculpture</a></li>
                    <li><a href="">NewCity</a></li>
                </ul>                
            </li>
            <li><a href="">Exhibition Catalogs</a>
                <ul>
                    <li><a href="">Catalog One</a></li>
                    <li><a href="">Catalog Two</a></li>
                    <li><a href="">Catalog Three</a></li>
                    <li><a href="">Catalog Four</a></li>
                    <li><a href="">Catalog Five</a></li>
                </ul>                
            </li>
            <li><a href="">BreakOut Artists</a>
                <ul>
                    <li><a href="">2012</a></li>
                    <li><a href="">2011</a></li>
                    <li><a href="">2010</a></li>
                    <li><a href="">2009</a></li>
                    <li><a href="">2008</a></li>
                </ul>                
            </li>
            <li><a href="">Cover Stories</a>
                <ul>
                    <li><a href="">Catalog One</a></li>
                    <li><a href="">Catalog Two</a></li>
                    <li><a href="">Catalog Three</a></li>
                    <li><a href="">Catalog Four</a></li>
                    <li><a href="">Catalog Five</a></li>
                    <li><a href="">Catalog One</a></li>
                    <li><a href="">Catalog Two</a></li>
                    <li><a href="">Catalog Three</a></li>
                    <li><a href="">Catalog Four</a></li>
                    <li><a href="">Catalog Five</a></li>
                </ul>                
            </li>
            </ul>
    </div><!-- writing Menu -->    
</div><!-- mainWrapper Content -->​

CSS

#writingMenu a {
    margin: 0px 0px 0px 0px;
    padding: 12px 5px 5px 5px;
    text-align: right;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    background: #ffffff;
    color: #B3B3B3;
    min-width: 140px !important;
    display: block;
}

#writingMenu a:hover {
    color: #37342e;
}

#writingMenu ul li ul {
    position: absolute;
    width: 90%;
    float: left;
    overflow: hidden;
    border-left: thin solid black;
    border-bottom: thin solid black;
    border-right: thin solid black;
    margin-left: -5px;
    padding-top: 5px;
    background-image: url(images/speckled_backgrounddk.jpg);
    display: block;
    height: 0px;
}

#writingMenu ul li ul li {
    background-image: none;
    float: none;
}

#writingMenu ul li ul a {
    margin: 0px;
    padding: 0px;
    text-align: left;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    color: #B3B3B3;
    background-color: transparent;
    background-image: none;
    text-transform: lowercase;
    color: #999999;
}​

Answer 1

        $(document).ready(function() {
    var defHeight = $('ul:first',this).height();
         console.log(defHeight);

        $("ul li").hover(
            function () {

                $('ul:first',this).stop().animate({height : "toggle"});
             }, 
            function () {
                 $('ul:first',this).stop().animate({height : "toggle"});
            }); 
            });

还没有试过，但这个应该行得通