javascript - 简单的 JavaScript 问题 - 列表未正确扩展

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>

问题: 当我点击文本 Buyers 时，它会显示子/嵌套列表。但是，其他元素不会为嵌套列表腾出空间。因此，嵌套列表覆盖了主列表的空间。

这是我的代码的问题还是它的标准工作方式？有没有办法让其他元素“下推”为嵌套元素让路？

谢谢!

Answer 1

您需要在 CSS 中使用 min-height: 而不是 height:。如果您了解 jQuery，.hide() 和 .show() 函数会工作得更好。