jQuery slideToggle动态调整位置？

Question

我正在学习jQuery，我不确定如何解决这个问题。我的问题很难解释，但基本上我在display: inline-block;中有按钮框。当我点击一个按钮时，下面会有一个菜单slideToggle。根据页面大小的不同，每行可以有2-8个左右的按钮。在html中，滑出菜单紧跟在相应的按钮之后，在下一个按钮之前。这显然会使滑出列表之后的任何按钮都下拉到列表的下面。

下面是我的基本设置：https://jsfiddle.net/cr1fev67/

不确定如何修复this...some的一种简单的结构变化或jQuery魔术来检查浏览器窗口大小并插入列表后的最后一个按钮元素的各行？？

Answer 1

正如其他人所提到的，您只需将列表的CSS更改为绝对，即可实现您想要的效果。

但是，如果您仍然希望看到列表下面的按钮，那么您可能必须重新排列您的HTML。

一些伪代码：

<div>Button1</div>
<div>Button2</div>
<div>Button3</div>

<div>List1</div>
<div>List2</div>
<div>List3</div>

如果每个列表都包含可变数量的选项，我建议在document.ready上使用JavaScript来更改数量。