Question

所以我做了一些下拉菜单。下拉列表是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"});
            }); 
            });

没有尝试，但这应该工作

Answer 2

如果你感兴趣，我会做一个基于css的dd菜单......

HTML =＆gt;

<!-- by rocky -->
<div id="wrapper">
    <div id='navMenu'>

    <ul>
    <li><a href="#">Menu1</a>

    <ul>

    <li><a href="#">Dropdown1</a></li>
    <li><a href="#">Dropdown2</a></li>
    <li id="submenu"><a href="#">Dropdown3</a>
    <ul>
        <li><a href="#">Submenu 1</a></li>

        <li><a href="#">Submenu2</a></li>
        <li><a href="#">Submenu3</a></li>
        </ul>
    </li>

    </ul> <!-- End of Menu1-->

    </li> <!-- Menu2 -->

    <li><a href="#">Menu2</a>
    <ul>

    <li><a href="#">Dropdown2</a>       </li>
    <li id="submenu"><a href="#">Dropdown2</a>
        <ul>
            <li><a href="#">Dropdown2</a></li>
        </ul>
        </li>
    <li><a href="#">Dropdown2</a></li>

    </ul> <!-- End Inner UL -->

    </li> <!-- ABOUT -->
    <li><a href="#">Menu3</a>
    <ul>

    <li><a href="#">Submenu3</a></li>
    <li id="submenu"><a href="#">Submenu3</a>
        <ul>
    <li><a href="#">Submenu3</a></li>
        </ul>
        </li>
    </ul> <!-- End Inner UL -->

    </li> <!-- End main LI -->
    </ul> <!-- End main UL -->

    </div> <!-- End Nav -->

    </div> <!-- End wrapper -->

CSS：

#navMenu {
    margin: 0;
    padding: 0;
}

#navMenu ul{
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#navMenu li{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
}

#navMenu ul li a {
    text-align: center;
    text-decoration: none;
    height: 30px;
    width: 150px;
    display: block;
    color: #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 30px;
}

#navMenu ul li:hover ul {
    visibility: visible;
}

#navMenu ul li ul a:hover {
    color: #999;
}

#navMenu ul ul li#submenu ul {
    position: absolute;
    visibility: hidden;
    top: 30px;
}

#navMenu ul ul li#submenu:hover ul {
    margin-top: -30px;
    margin-left: 105px;
    visibility: visible;
}

这里有一个演示： http://dbwebb.se/style/?id=152

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

2 个答案: