javascript - 列出新项目不滑动的项目

Question

我有一个嵌套的无序列表，当单击父项时，我想像手风琴一样扩展新的子项。

该功能运行良好，但父列表没有向下滑动以适应新可见的子列表（因此子列表只是在不动的父列表之上滑动）。我在小提琴上试过这个，奇怪的是它在那里工作得很好。我猜这与我用来格式化列表的 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/