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

【问题标题】：Simple javascript issue - list is NOT expanding correctly简单的 javascript 问题 - 列表未正确扩展
【发布时间】：2012-05-11 14:17:14
【问题描述】：

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 时，它会显示子/嵌套列表。但是，其他项目不会为嵌套列表腾出空间。因此嵌套列表会覆盖主列表的空间。

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

谢谢！

【问题讨论】：

pObj = document.getElementById(pObj).id; - 那句话让我脸红了。
如果你想知道为什么：如果元素不存在，它会抛出一个错误，如果它确实存在，它就是一个空操作，因为它几乎等于“pObj = pObj”。在以下代码中使用var elem = document.getElementById(pObj)，然后使用elem.style...。
@ThiefMaster 我不打算以这种方式分配 pObj。这只是正在进行的工作......无论如何，我也尝试了你的方法，但仍然没有改变。另请注意，即使使用 pObj，当我提醒显示属性的值时，它确实显示“无”。所以从技术上讲，它应该给出一些答案。另外，当我写 display='block' 时，不是说 display=''，而是嵌套列表显示但没有扩展。
是的，这不是答案，只是评论...

标签： javascript css list

【解决方案1】：

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

【讨论】：

感谢您的建议。这只是我需要保持一个非常轻量级的项目的那些时刻之一。并且使用 JQuery 不是此任务的选项。但是，是的，我同意它有很多功能 - 是的，我也使用过它:) +1 为您提供建议。
感谢您的回复和 +1。我倾向于在任何地方使用 jQuery，但如果你不能，我理解。

【解决方案2】：

从你的 CSS 中取出这个：

#divMainMenu li ul{
    display: none;
}

然后将#divMainMenu li 选择器上的height 属性更改为min-height

生成的 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

【讨论】：

非常感谢您抽出宝贵的时间来完成这项工作。我也同意仅仅为了这样的小事使用库是没有意义的。不幸的是，由于您的评论已被删除，因此我无法为此 +1。再次感谢！
还有一件事......我将 #divMainMenu ul 更改为 min-height:100px 以防止它耗尽 div 的意思菜单:)
请记住使用#divMainMenu ul 匹配作为#divMainMenu 后代的所有ul。在您的情况下，这意味着ul 的外部和内部都匹配。