如何切換類，以便點擊正文將關閉下拉菜單並更改剩餘項目（jquery）上的背景？

Question

有一個由展開/摺疊按鈕（＃client-select）和下拉菜單（.client-select-dd）組成的菜單下拉菜單。菜單本身工作得很好，除了我希望它也可以摺疊，如果用戶點擊菜單外的任何地方，而不是專門再次點擊按鈕。

最初菜單已摺疊，因此第一次單擊會更改菜單按鈕（＃client-select）上的背景並使下拉選項可見（.client-select-dd）。第一次點擊也會將一個類添加到主體（.client-deactivate）中。點擊（＃客戶端選擇）再次摺疊菜單並恢復按鈕圖像背景。

在我看來，當菜單打開時（並且有「.client-deactivate」類）點擊主體時，應該摺疊菜單並移除.client-deactivate，但單擊主體並沒有任何作用。感謝您提供的所有幫助。

$("#client-select").click (function() { 
    $("body").toggleClass("client-deactivate"); 
    $(".client-select-close").toggleClass("client-select-open"); 
    $(".client-select-dd").toggle(); 
}); 

$(".client-deactivate").click (function() { 
    $(".client-select-open").toggleClass("client-select-close"); 
    $(".client-select-dd").toggle(); 
}); 

Answer 1

這可能是因爲當單擊處理程序首先由瀏覽器讀取，對人體無標籤「.client - 關閉」級。另外，當你點擊正文時，你不想切換任何東西，因爲如果菜單被摺疊並且你點擊了正文，它會展開菜單。我假設你只想要身體點擊處理程序關閉菜單，如果它已經打開。

嘗試改變第二次點擊處理程序：

$("body").click(function() { 
    if($("body").hasClass("client-deactivate") { 
    $(".client-select-open").toggleClass("client-select-close"); 
    $(".client-select-dd").toggle(); 
    $("body").removeClass("client-deactivate"); 
    } 
}); 

你也可以考慮與removeClass更換這些切換功能，只是爲了確保點擊身體不展開菜單...就像如果另一個功能是摺疊菜單，但不會將「client-deactivate」類刪除到主體，然後單擊主體然後仍然具有類名稱並運行上面的代碼，將菜單切換到打開位置。

Answer 2

想通了：

$（ 「＃客戶選擇」）生活（ '點擊'，函數（）{ $（ 「＃客戶選擇」）addClass（「客戶端 - 選擇 - 。打開「）; $（」＃client-select「）。removeClass（」client-select-close「）; $（」。client-select-dd「）。css（」display「，」block「）; $（「body」）。addClass（「client-deactivate」）; }）;

$(".client-deactivate").live('click', function() { 
    $("#client-select").removeClass("client-select-open"); 
    $("#client-select").addClass("client-select-close"); 
    $(".client-select-dd").css("display", "none"); 
    $("body").removeClass("client-deactivate"); 
});