javascript - jQuery slideToggle 动态调整位置?

标签 javascript jquery html css

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

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

不确定如何解决这个问题...某种简单的结构更改或 jQuery 魔法来检查浏览器窗口大小并在相应行的最后一个按钮元素之后插入列表?

最佳答案

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

但如果您仍想看到列表下方的按钮,那么您可能需要重新安排 HTML。

一些伪代码:

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

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

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

关于javascript - jQuery slideToggle 动态调整位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37887973/

相关文章:

javascript - 如何从 Chrome 扩展上下文在页面上运行脚本?

javascript - 沿着 Canvas 上的一条线放置文本标签

javascript - Angular 2+ 使用 DI 和实例化模型

javascript - 是否可以使用 firebase 通过免费帐户进行网络抓取?

javascript - 用 JS 打开新窗口 - 但里面有 MEDIA_URL - 如何?

javascript - jQuery var 没有改变

javascript - 明智地使用 .delegate() 性能更好吗?

javascript - jquery validate - 根据条件切换字段集(带有嵌套的必填字段)

javascript - jQuery 我想将事件类添加到 anchor 标记的链接 ID

javascript - 为什么我的 HTML 表单会被提交?