Foundation 5 下拉按钮在嵌套 table 行中不起作用

Question

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

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

• 单击 Header 1 以显示展开的 table 行。
• 然后，单击 下拉按钮 1。单击按钮后，下拉菜单没有出现。
• 单击 Header 2 以显示展开的 table 行。
• 然后，点击+按钮。单击按钮后，下拉菜单没有出现。

但是，如果下拉按钮本身位于 table 行中，则下拉按钮在两个位置都可以正常工作（即在 table 行和嵌套的 table行)

参考这个例子：http://emberjs.jsbin.com/mozudezewo/edit?html,css,js,output

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

我不确定为什么下拉按钮会这样。非常感谢解决此问题的任何帮助。谢谢！

Answer 1

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

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

问题是当你初始化 foundation 时，在插入 App.ApplicationView 时 DOM 中没有 .dropdown，因为它们被 [=10= 隐藏了] 声明。这些 {{if}} 标签实际上在 DOM.

中移除和插入 HTML blob

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

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

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

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