Jqueryアコーディオンは角度ルーティングのページに戻った後に開かない

Question

最初にページにアクセスしたときに完全に動作するjqueryアコーディオンを作成しましたが、アコーディオンがアコーディオンで表示されなくなった場合、その子供たち。私の最強の推測は、文書準備機能でアコーディオンを初期化する必要があることです。

アコーディオンCODE：

 <ul class="accordion"> 
      <li> 
       <a id="portfolioId" class="toggle" href="javascript:void(0);">Portfolio Name</a> 
       <ul class="inner"> 
        <li class=""> 
         <a id="projectId" href="#" class="toggle">Project Name</a> 
         <ul class="inner"> 
          <li> 
           <a id="designId" href="#" class="toggle">Design Name</a> 
           <ul class="inner"> 
            <li> 
             <a id="designName" href="#" class="toggle designArea" style="background-image: unset !important;">Design Area</a> 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 

スクリプトコード：

$(document).on("click", ".toggle", function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    if ($this.next().hasClass('show')) { 
     $this.next().removeClass('show'); 
    } else { 
     $this.parent().parent().find('li .inner').removeClass('show'); 
     $this.next().toggleClass('show'); 
    } 
}); 

私は、データを取り込むために、角の反復を使用していると私は私が最初のページに来たときにそれにゼロの問題を持っていますが、言ったように離れて移動すると、スクリプトは展開される要素に.showを追加しません。

ご協力いただければ幸いです。

Answer 1

最初のコメントの後で、それが第1、第3（奇数倍、ページが訪問された）で動作するという事実は、ページへの訪問ごとにクリックハンドラが再度バインドされることを意味する。

ページが2回目に訪れると、2つのクリックハンドラがあり、それらは互いに打ち消し合うアコーディオンを切り替えるものです。最初のハンドラはshowクラスを追加し、2番目のハンドラはそれを見つけて削除します。

解決策は、再バインドする前にハンドラをアンバインドすることです。 （このような場合のために、イベントを名前空間には良いアイデアです）

だから、ときより良いアプローチは、（.off(...)）バインド解除を行うことであろう

$(document).off('click.accordion-toggle').on('click.accordion-toggle', '.toggle', function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    if ($this.next().hasClass('show')) { 
     $this.next().removeClass('show'); 
    } else { 
     $this.parent().parent().find('li .inner').removeClass('show'); 
     $this.next().toggleClass('show'); 
    } 
}); 

---

にコードを変更しますコンポーネントをアンロードします（）。ページやその他の似たような瞬間を、アプリケーション/ページに応じてに変更する前に変更してください。