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

【问题标题】：Foundation 5 Dropdown button not working in nested table rowFoundation 5下拉按钮在嵌套表格行中不起作用
【发布时间】：2015-07-08 08:13:24
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

因此，您需要做的是找到一种知道何时插入下拉菜单并重新初始化基础的方法。

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

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

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

【讨论】：

感谢@PhilHauser 对我的代码问题的回复和解释。关于您共享的更新的jsbin，下拉菜单似乎仅适用于Header 2 的下拉按钮。但是，在您点击Header 2 上的下拉按钮后，Header 1 上的下拉菜单也会起作用。
至于 SO 问题，我确实在我的代码上进行了尝试，并且在添加 {{action}} 挂钩以手动切换下拉菜单显示/隐藏后工作正常。但是，下拉菜单不会使用此方法自动关闭。目前，我正在寻找手动关闭下拉菜单的方法。
关于我分享的 jsbin，你说得对，第一个下拉菜单不起作用，这是因为我在按钮位于 dom 之前重新初始化了基础。我用令人作呕的 setTimeout updated 来说明这一点。如果您使用新的{{action}} 钩子方式发布另一个 JSbin，我可以看看。