javascript - jQuery slideToggle 动态调整位置？

Question

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

这是我的基本设置:https://jsfiddle.net/cr1fev67/

不确定如何解决这个问题...某种简单的结构更改或 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 来更改数量。