Css 仅在单击时展开浮动LI，而不展开任何其他LI

我有一个问题列表，在点击时有一个隐藏的内容切换分区。这很好，但是因为我的LI是浮动的，当我打开其中一个LI时，它会向下推相邻的内容

单击后，内容将打开（间隙）

我希望发生的事情（没有差距）

HTML

<ul class="main">
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
</ul>

jQuery

$('ul.main li').click(function () {
   $(this).find('.subMain').slideToggle(500); 
});

在这里拉小提琴

---

我必须将这些列表放入列中吗？

我在您的JSFIDLE中对此进行了一些研究，并提出了一些jQuery代码，将您现有的HTML拆分为两个列表，看起来它的行为符合您的需要。我相应地更新了CSS。这就是你要找的吗

用于拆分列表的jQuery代码：

var everyOtherLi = $('ul.main li:odd');
var firstColumnList = $('ul.main');
var secondColumnList = $('<ul class="main"></ul>').insertAfter(firstColumnList);
secondColumnList.append(everyOtherLi);

var everyOtherLi=$（'ul.main li:odd'）；
var firstColumnList=$（'ul.main'）；
var secondColumnList=$（'
）.insertAfter（firstColumnList）；
secondColumnList.append（everyOtherLi）；

我不相信有一种方法可以做到这一点，而不将它们放在单独的列中。浮动的工作方式是，它们将包装并占用任何可用空间。这就是为什么在展开上方的项目时，会看到左侧的LI向右侧移动。如果你不想让他们站在他们一边，只想向下移动，你就需要做两列。这就是我的想法，但是我目前无法拆分列表，你知道有没有css技巧可以将他们分开？有了css，没有。。。您必须在服务器端渲染它，或者使用javascript将项目操纵到单独的列表中。即使您使用

列计数：2

，您仍然会得到一个像glitchy一样的动画，将下面的

li

推到下一列中。我目前正在尝试将列表样式设置为css表，尝试在单击时仅获取要展开的单元格

.main { 
    list-style: none; 
    margin: 0; padding: 10px 0; 
    width: 500px; 
    border: 1px solid #000;
    overflow: hidden;
}
.main li { 
    width: 50%; height: auto;
    float: left; 
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
}
.subMain { 
  margin: 0; padding: 0; display: none;  
}

$('ul.main li').click(function () {
   $(this).find('.subMain').slideToggle(500); 
});

var everyOtherLi = $('ul.main li:odd');
var firstColumnList = $('ul.main');
var secondColumnList = $('<ul class="main"></ul>').insertAfter(firstColumnList);
secondColumnList.append(everyOtherLi);