jsをリファクタリングしてdiv内のコンテンツをプログラムで追加する

Question

あるコードを別のコードに複製するのに問題があります。コードの目的は、カスケードドロップダウンを含む任意のリンクにポップオーバーを追加することです。私のコードはよくコメントされていて、document.ready内では、どこにポップオーバーにコンテンツを追加するのか、再帰関数を呼び出すことでsubMenusを追加することができます。

このコードの作業バージョンは、このlinkであり、それは、HTML内のこのタイプの構造に大きく依存します：、私はそれだけに依存することになるように私のコードをリファクタリングしたいが、

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

：

this linkで

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

、私はそれを行うことを試みたが、私の再帰関数は、もはやそれは空のサブメニューで、その結果、二番目のパラメータです認識して問題に遭遇しました。そして、ベースを返すに終わる

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

：私の主な変更点はdocument.readyの中、私はもはや静的「.content」にそれに追加していないということです。私がサブメニューを修正するために何ができるか、これについてもっと良い方法があるかどうか教えてください。

ありがとうございます。

Answer 1

ここでの中核となる問題は、一意でないIDを使用していることです。スクリーンショットではmenu1は複数の場所で使用しているIDです。

また、基本的に私は理解していないこれは、2つの場所でDOMを作成しています。これらのpopoversの10を持っている場合はどうなりますか？ DOMに隠しクローンを10個追加しますか？あなたがしなければならないのは、あなたの実際の.popoverを一度埋め込むだけです。構造体を解析し、1つのポップオーバーを構築します。