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

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

4 个答案: