重构js以编程方式在div中追加内容

Question

我无法在另一个代码中复制结果。代码的目的是将弹出窗口添加到包含级联下拉列表的任意链接。我的代码得到很好的评论，并且在document.ready中，您可以看到我向popover添加内容的位置，以及我调用递归函数添加subMenus的位置。

此代码的工作版本位于此link，并且它在很大程度上取决于html中的此类结构：

<div id="popover-markup"> <a href="#" class="trigger">Popover link</a>
  <!-- contents of popover -->
  <div class="content hide">
  </div>
</div>

虽然，我想重构我的代码，以便它只依赖于：

<div id="popover-markup"> <a href="#" class="trigger">Popover link</a>
</div>

在this link中，我试图这样做，但遇到问题，我的递归函数不再识别它的第二个参数，导致空子菜单。我的主要变化是在document.ready中，我不再附加静态“.content”而是：

var base = $(`<div class="content hide">`);

然后以返回基数结束。请让我知道如何修复子菜单或者是否有更好的方法来解决这个问题。

提前谢谢。

Answer 1

嗯，这里的核心问题是你使用的是非唯一身份证。在屏幕截图中menu1是您在多个地方使用的ID。

你基本上也是在两个地方创建DOM，我不明白。如果你有10个这样的popovers怎么办？你会在DOM中生成另外10个隐藏的克隆吗？你应该做的只是填充你的实际.popover一次。解析结构并构建一个popover。