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

因为你直接绑定到任何东西。添加活动不会切换事件。这就是你想要的：

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

Answer 2

使用委托

$('body').on('click', '#mobile-menu:not(.active)',function(){

});

$('body').on('click', '#mobile-menu.active',function(){

});

或者您可以使用 ID 绑定到元素并检查它是否具有类

$('#mobile-menu').click(function(){
    if($(this).hasClass('active')){

    }else{

    }    
});

Answer 3

当您分配点击处理程序时，您的选择器只选择那些元素.active并为它们分配一个点击处理程序。另一个单击处理程序未找到任何元素，因此未分配。您需要一个执行这两个功能的处理程序：

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

Answer 4

您的选择器$('#mobile-menu.active')指的是尚不存在的东西，因此您的第二个函数实际上没有做任何事情。

你可以像这样实现你想要的：

$('#mobile-menu').click(function(){
  if($(this).hasClass('active')) {
    // Do stuff
  } else {
    // Do other stuff
  }
});