javascript - 列表元素不滑动新元素

Question

我有一个嵌套的无序列表，我想在单击父项时像 Accordion 一样展开新的子项。

功能运行良好，但父列表并未向下滑动以容纳新出现的子列表(因此子列表只是滑动到不动的父列表之上)。我试过这个 on a fiddle奇怪的是它在那里工作得很好。我猜这与我用来设置列表格式的 CSS 有关？

代码....

HTML:

<ul>
    <li>
        news
        <ul>
            <li>2013</li>
            <li>2012</li>
            <li>2011</li>
        </ul>
    </li>
    <li>scores</li>
    <li>standings</li>
    <li>the ddl</li>
    <li>records</li>
    <li>teams</li>
</ul>

Javascript:

$(document).ready(function() {  
    $('#nav-bar ul li').on('click', function() {
        $(this).children().slideDown('fast');
        $(this).siblings().children().slideUp('fast');
    });
});

CSS:

#nav-bar {  /*left bar*/
    float: left;
    width: 110px;
    text-align: center;
    height: inherit;
}

#nav-bar ul {   /*main menu*/
    list-style-type: none;
    text-align: left;
    padding: 0px;
}

#nav-bar ul li {    /*main menu item*/
    height: 75px;
    background-color: #666;
    color: #ccc;
    border-bottom: 3px solid #333;
}

#nav-bar ul li ul { /*sub-menu*/
    display: none;
}

#nav-bar ul li ul li {  /*sub-menu item*/
    height: 35px;
    background-color: #aaa;
    color: #666;
    border-bottom: 1px solid #333;
}

Answer 1

你在应该的地方固定了一个高度，恕我直言，一个最小高度: http://jsfiddle.net/7VPG6/36/

#nav-bar > ul>  li {    /*main menu item*/
    min-height: 75px;
    background-color: #666;
    color: #ccc;
    border-bottom: 3px solid #333;
}

看看:http://www.w3.org/TR/css3-selectors/