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来更改数量。

jQuery slideToggle动态调整位置？

1 个答案: