javascript - jQuery 点击触发两次

Question

当使用 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>

Answer 1

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

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

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

您不能期望同时保留类(class)、和重定向，您必须执行其中之一。