javascript - 为什么这段 jQuery 代码不起作用？

Question

只有第一个函数有效。当我再次单击该按钮时，什么也没有发生。控制台始终打印 1。

$('#mobile-menu:not(.active)').click(
  function (e) {
    $('#wrapper').addClass('show-menu');
    $(this).addClass('active');
    $('#sidebar').show();
    e.preventDefault();
    console.log(1);
  }
);
$('#mobile-menu.active').click(
  function (e) {
    $('#wrapper').removeClass('show-menu');
    $(this).removeClass('active');
    $('#sidebar').hide();
    e.preventDefault();
    console.log(2);
  }
);

Answer 1

因为你直接绑定(bind)到任何东西。添加 active 不会切换事件。这就是您想要的:

$('#mobile-menu').click(
    function (e) {
        var notActive = ! $(this).hasClass('active');
        $('#wrapper').toggleClass('show-menu', notActive);
        $(this).toggleClass('active', notActive);
        // This is what I had originally
        //$('#sidebar')[notActive ? 'show' : 'hide']();
        $('#sidebar').toggle(notActive); // per @ᾠῗᵲᄐᶌ
        e.preventDefault();
        console.log(notActive ? 1 : 2);
    }
);