javascript - jQuery单击时触发两次

使用jQuery .on('click', ...)函数执行两次：

$(document).ready(function () {
    $('#collapsible-menu li a').click(function() {
        $('#collapsible-menu li').removeClass('active');
        $(this).parent('li').addClass('active');
    });
});

因此，发生的事情是菜单项立即处于活动状态，然后类消失了。

我不知道为什么它被发射了两次。我不想使用event.preventDefault()或event.preventPropagation()或return false，因为那样单击链接将无济于事。

HTML：

<div class="collapse navbar-collapse" id="collapsible-menu">
  <ul class="nav navbar-nav">
    <li class="active"><a href="/expenses">Expenses</a></li>
    <li class=""><a href="/types">Types</a></li>
  </ul>
</div>

最佳答案

您单击的锚将页面重定向到/types。

当您转到另一个页面时，JavaScript所做的任何更改都将丢失。
因此，您要添加一个类，然后将其重定向并丢失该类，事件处理程序不会触发两次
为了避免重定向，您可以阻止锚的默认操作

$('#collapsible-menu li a').click(function(e) {
    e.preventDefault();
    $('#collapsible-menu li').removeClass('active');
    $(this).parent('li').addClass('active');
});

您不能期望保留该类并同时进行重定向，而必须要做一个或另一个。