jquery - 意见什么是避免重叠内容的更好解决方案(多上传)

Question

我使用 Ninja Forms 插件在 Wordpress 网站上构建了一个表单。我需要设计文件上传按钮的样式。最佳解决方案(跨浏览器兼容)我发现的是本教程:

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

我设法按预期设计了按钮的样式，但是我面临两个问题现在:

a) 一旦选择了多个文件，文件列表现在会与以下内容重叠。

b) 我无法提供“MultiFile-wrap”溢出:隐藏而不隐藏文件列表。

我正在考虑使用以下两种解决方案之一:

尝试以某种方式将“MultiFile-list”移出其父级DOM 中的(多文件换行)。 (也许使用 jQuery)

或

使用 jQuery 计算列表中当前有多少项，并相应地为下面的内容添加边距。

我不确定哪种方法更好。我倾向于使用第二种方法...

Answer 1

所以，我选择了第一个选项，因为它似乎是更简洁的方法，而且它允许我提供“MultiFile-wrap”overflow:hidden。

我花了一点时间才明白“MultiFile-list”是动态创建的，所以我不得不将该函数绑定(bind)到点击事件。

这就是诀窍:

$(document).on('click', '.upload-wrap .MultiFile-wrap', function () {
  $('.upload-wrap .MultiFile-wrap .MultiFile-list').insertBefore('.nf-desc');
});