javascript - Foundation 5 下拉按钮在嵌套表格行中不起作用

Question

如果下拉按钮位于嵌套表格行内，则下拉按钮不起作用。

请引用jsbin中的这个例子:http://emberjs.jsbin.com/yesaguwoli/edit?html,output

• 单击标题 1 以显示展开的表格行。
• 然后，点击下拉按钮 1。单击按钮后，下拉菜单不会出现。
• 单击标题 2 以显示展开的表格行。
• 然后，点击+ 按钮。单击按钮后，下拉菜单不会出现。

但是，如果下拉按钮位于表格行本身，则下拉按钮在两个地方都可以正常工作(即在表格行和嵌套表格行中)

引用这个例子:http://emberjs.jsbin.com/mozudezewo/edit?html,css,js,output

• 点击下拉按钮 1。单击按钮后，下拉菜单出现。
• 单击标题 2 以显示展开的表格行。
• 然后，点击+ 按钮。单击按钮后，下拉菜单出现。

我不确定为什么下拉按钮会以这种方式运行。非常感谢解决此问题的任何帮助。谢谢!

Answer 1

我已经采用了您的工作示例，并将其包装在与您损坏的示例 (http://emberjs.jsbin.com/bubeveyapo/1/edit?html,output) 相同的 {{if}} 语句中，但它不再有效。

这是因为您正在 App.ApplicationView 的 didInsertElement Hook 上初始化 foundation 下拉菜单。

问题是，当您初始化基础时，插入 App.ApplicationView 时 DOM 中没有 .dropdown，因为它们被 {{if}} 语句。这些 {{if}} 标签实际上在 DOM 中删除和插入 HTML blob。

所以您需要做的是找到一种方法来了解何时插入下拉菜单并重新初始化基础。

Foundation 有一种使用 $(document).foundation('dropdown', 'reflow'); 处理重新初始化的方法，这将再次检查 DOM 是否有任何 foundation'ey 并重新 -为它应用 javascript。

This JSbin已重新初始化 toggleDetails 操作的基础，因为那是插入按钮的时间。

你真的应该考虑不依赖基础来显示隐藏你的下拉列表，并考虑在它们上添加 {{action}} Hook 并手动管理显示/隐藏。这已在 SO 上得到解答，因此请查看 this question .