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}}语句中，并且它不再有效。

这是因为您正在初始化foundation的{​​{1}}挂钩上的didInsertElement下拉菜单。

问题在于，在初始化基础时，在插入App.ApplicationView时DOM中没有.dropdown，因为它们被App.ApplicationView语句隐藏。这些{{if}}标记实际上会删除并在DOM中插入HTML blob。

因此，您需要做的是找到一种方法来了解插入下拉列表的时间并重新初始化基础。

基金会有一种方法可以使用{{if}}处理重新初始化，这将再次检查DOM的任何基础，并重新应用javascript。

This JSbin重新初始化$(document).foundation('dropdown', 'reflow');操作的基础，就像插入按钮时一样。

实际上你应该考虑不依赖于基础来显示隐藏你的下拉菜单并看看在它们上添加toggleDetails挂钩并手动管理显示/隐藏。这已经在这里得到解答，所以请看this question。