Question

CSS：

#divMainMenu ul {
    list-style-type: none;
    padding: 5px 0;
    height:400px;
}
#divMainMenu li {
    height: 17px;
    margin: 3px 0;
    padding: 14px 2px;
    border: 1px solid #eee7cb;
    background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
    display: none;
}

html和脚本：

<script type="text/javascript">
function Show(pObj)
{
pObj = document.getElementById(pObj).id;
if (document.getElementById(pObj).style.display=='none')
    document.getElementById(pObj).style.display='block';
else
    document.getElementById(pObj).style.display='none';
}
</script>
<div id="divSidePanel">
    <div id="divMainMenu">
        <ul>
            <li onclick="Show('Buyers')">Buyers
                <ul id="Buyers" style="display:none;">
                    <li>Search</li>
                    <li>Submit request</li>
                    <li>Send message to owner</li>
                </ul>
            </li>
            <li>Sellers</li>
            <li>Contact Us</li>
        </ul>
    </div>
</div>

问题：当我点击文本买家时，会显示子/嵌套列表。但是，其他项不会为嵌套列表腾出空间。因此，嵌套列表会在主列表的空间中写入。

这是我的代码的问题还是它的标准方式？是否有办法让其他项目“下推”为嵌套项目让路？

谢谢！

Answer 1

您需要在CSS中使用min-height:代替height :.如果您了解jQuery，.hide（）和.show（）函数将更好地工作。

Answer 2

从你的CSS中取出：

#divMainMenu li ul{
    display: none;
}

并将height选项卡上的min-height媒体资源更改为#divMainMenu li

结果css：

#divMainMenu ul {
    list-style-type: none;
    padding: 5px 0;
    height:400px;
}
#divMainMenu li {
    min-height: 17px;
    margin: 3px 0;
    padding: 14px 2px;
    border: 1px solid #eee7cb;
    background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{

}

Example

简单的javascript问题 - 列表没有正确扩展

2 个答案: