在显示或隐藏时对齐列表答案

【问题标题】：Align lists on showing or hiding在显示或隐藏时对齐列表
【发布时间】：2013-01-23 15:16:14
【问题描述】：

我有一个列表，其中每个项目都有一个子列表。为了给它们设置样式，我使用了 CSS。

<ul class="left">
    <li class="itemc">Item 1
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 2
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 3
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 4
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
</ul>

整个脚本可以在here找到

我的问题是当我按下主列表中的一个项目时，会显示子列表，但主列表中的其他项目会一个接一个。我应该如何或修改什么以使其工作？我的意思是，当单击一个项目时，要显示的子列表以及要与子列表末尾对齐的下一个项目？

【问题讨论】：

1.不要使用网站名称作为昵称。 2.你的问题更多是CSS而不是JS。
@BackinaFlash 您能否更具体地说明第二点？
@Back，没有明确的理由不使用站点名称作为用户名，是吗？特别是如果那是意图，它的拼写是错误的。
感谢您回答我的问题！
@Morpheus 这是对上面所有 cmets 的讽刺评论......

标签： javascript jquery css list

【解决方案1】：

向您的 .left li 类添加两个附加属性：

.left  li {
    float: left;
    clear: left;
}

Updated jsfiddle

【讨论】：

【解决方案2】：

问题来自这样一个事实，即当子项目打开时，项目位置没有改变。他们呆在同一个地方。

正如您在此处看到的（来自 Firefox 的 3D 视图），项目 3 和 4 仍保留其原始位置（单击项目 2），并且子项目位于它们上方。

子项实际上不被视为在项中。因此，当它被显示时，其他项目看不到它们上方的项目有任何变化，并保持在同一个地方。但是文本会受到子菜单的影响。所以它被放在它的末尾。这一切都归功于子项上的float: left;。

要解决此问题，您只需在 CSS 中将 clear: both; 或 clear: left; 添加到 .left li。

编辑：看来我迟到了抱歉……

小提示：您应该避免在.left .submenu li 之后添加.left li，它可能会替换您之前放置的一些属性。

【讨论】：