Question

我有一个嵌套的无序列表，我希望在点击父级时为新的子项扩展手风琴。

功能正常，但父列表不会向下滑动以容纳新显示的子列表（因此子列表只会滑动在不动的父列表之上）。我尝试了这个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/

列出没有为新项目滑动的项目

1 个答案: