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在回到带有角度路由的页面后不会打开

回答

相关问题