為什么帶有事件處理程序的addClass removeClass不能按預期工作？

Question

jQuery版本1.6

目標：當用戶點擊向下箭頭（展開expander-down ）時，顯示高級區域。 同樣明智的是，當用戶點擊上箭頭（ expander-up ）時，隱藏高級區域。

問題：我認為使用下面的代碼實現起來很簡單。 單擊expander-up ，高級搜索區域按預期顯示，但是當我單擊expander-down ，沒有任何反應。

僅供參考，我使用圖像分割技術通過添加/刪除類（expandder-down，expandder-up）來交換箭頭的外觀。

JavaScript的：

$(".expander-down").unbind("click").click(function ()
{
   $(this).addClass("expander-up").removeClass("expander-down");
   $("#advanced-search").show();
});

$(".expander-up").unbind("click").click(function ()
{
   $(this).addClass("expander-down").removeClass("expander-up");
   $("#advanced-search").hide();
});

HTML

<a href='#'>
  <span class='expander-down'></span>
</a>

<div id='advanced-search'>advanced!</div>

Answer 1

因為分配了click處理程序的元素永遠不會更改。 即使用戶單擊擴展器，您也可以在其上保留相同的處理程序（向下或向上）。

我會像這樣重構它：

$(".expander-down, .expander-up").click(function() {
    var $this = $(this);
    $this.toggleClass("expander-down expander-up");
    $("#advanced-search").toggle($this.hasClass("expander-down"));
    return false; // Stops propagation and prevents default action
});

通過切換向下/向上狀態響應單擊，然后根據結果狀態顯示/隱藏搜索框。 我認為你的代碼在擴展器關閉時顯示它，所以這就是我上面所做的，但這對我來說並不是立即有意義的。 如果我誤讀，只需將hasClass中的hasClass expander-down更改為hasClass expander-up 。

Answer 2

問題在於.expander-up在頁面加載中不存在，這意味着事件不會被綁定到您的范圍。

取消綁定所有點擊功能根本不是必需的。 此外，您可以將兩個函數合並為一個：

$(".expander").click(function(e) {
   e.preventDefault(); // This avoids unwanted scrolling effect
   $(this).toggleClass("expander-up expander-down");
   $("#advanced-search").toggle();
});

toggleClass將css類添加到元素（如果尚未設置），並刪除該類（如果已設置）。 toggle執行相同但元素可見性。

你的HTML應該是這樣的：

<a href='#'>
  <span class='expander expander-down'></span>
</a>

<div id='advanced-search'>advanced!</div>