Jquery Accordion在回到帶有角度路由的頁面後不會打開

我建立了一個jquery手風琴，當第一次到達頁面時完美地工作，但是當我用angular改變到該頁面時手風琴將不再展開以查看它的孩子。我最強烈的猜測是它需要在文檔就緒功能中初始化手風琴。Jquery Accordion在回到帶有角度路由的頁面後不會打開

ACCORDION 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'); 
    } 
});

我使用的角度重複填充數據就像我說我有零個問題與它時，第一次來的頁面，但如果我導航離開然後回來的腳本將不會添加。顯示回要擴展的元素。

任何幫助將非常感謝！

來源

2017-10-19 Michael H.

您何時綁定到文檔？ –

嗨加比，我對Angular完全陌生，所以我不認爲它是綁定到文檔。這是與我現在手風琴有關的所有代碼。 –

'$（document）.on（「click」，...'綁定到文檔，問題是代碼何時運行？ –

經過一些初步評論，它在第1次，第3次（奇數次頁面訪問）的事實意味着每次訪問該頁面時，再次綁定點擊處理程序。

所以第二次訪問頁面時，有兩個點擊處理程序，因爲他們所做的是切換手風琴，他們相互取消。第一個處理程序添加show類，第二個處理程序找到並刪除它。

解決的辦法是在重新綁定之前解除綁定處理程序。（這樣的情況下，它是一個好主意，命名空間中的事件）

因此，代碼更改爲

$(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'); 
    } 
});

一個更好的辦法是做拆散（.off(...)）時你卸載你的組件（之前更改頁面或其他類似的時刻，取決於你的應用程序/頁面做什麼）。

來源

2017-10-19 22:59:58

非常感謝Gaby幫助我理解問題並找到解決方案！ –

Jquery Accordion在回到帶有角度路由的頁面後不會打開

回答

相關問題