爲什麼這段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 
    } 
});