Question

我建立了一个jquery手风琴，在第一次进入页面时效果很好，然而，当我以角度重新路由到那个页面时，手风琴将不再展开以看到它的孩子。我最强烈的猜测是它需要在文档就绪函数中初始化手风琴。

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

我正在使用角度重复来填充数据，就像我说我第一次进入页面时没有问题但是如果我离开然后返回脚本将不会添加.show回到要扩展的元素

任何帮助都会非常感激！

Answer 1

经过一些初步评论之后，它在第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(...) ）（在更改页面或其他类似时刻之前，具体取决于您的应用/页面的内容）。

回到带有角度布线的页面后，Jquery Accordion不会打开

1 个答案: