在jQuery中切換類

我不能讓我的代碼工作。在jQuery中切換類

$(document).ready(function() { 
$('.openMenu').click(function() { 
    $('#menu').animate({ 
    left: '0%' 
    },500); 
    $(this).removeClass('openMenu').addClass('closeMenu'); 
}); 

$('.closeMenu').click(function() { 
    $('#menu').animate({ 
    left: '-100%' 
    },500); 
    $(this).removeClass('closeMenu').addClass('openMenu'); 
}); 
});

的代碼塊應該使點擊帶班「openMenu」 div時的菜單出現，並使其成爲「隱藏」按鈕，這樣，當它再次點擊，菜單消失。等等。

它只能運行一次：菜單出現後，div的類從openMenu更改爲closeMenu，但它不會隱藏菜單。

我會感激你的幫助

來源

2014-11-22 Jytug

包括HTML和CSS請 – Wold 2014-11-22 00:56:07

你的處理程序綁定到什麼DOM是你的代碼執行的時刻。如果您更改DOM，處理程序不會更改。每個元素保留其綁定的處理程序，而不管其更改。 on（'click'，'.openMenu'，function（）{..}）;''和'$（'parent-selector'）將處理委託給父元素。（'click'，'.closeMenu'，function（）{..}）;' – 2014-11-22 00:56:12

$('.closeMenu')在你的代碼運行時不存在。

您可以輕鬆地將2個處理程序合併爲一個，或使用事件委派。

，結合它們看起來是這樣的：

$('.openMenu').click(function() { 
    var leftAmt = $(this).is('.closeMenu') ? '-100%' : '0%'; 
    $('#menu').animate({ 
    left: leftAmt 
    },500); 
    $(this).toggleClass('openMenu closeMenu'); 
});

我可能向後有這樣和$('.openMenu')不會在頁面加載存在（取決於初始元素的狀態），只是改變了開始選擇，如果這是案件

來源

2014-11-22 00:59:50 charlietfl

我懷疑事件代表團是你在這裏後。不要使用jQuery的.click方法，而應考慮使用.on方法，並在其中提供選擇器。

$(document).ready(function() { 
    $(document).on("click", ".openMenu", function() { 
    // ... 
    }); 
    $(document).on("click", ".closeMenu", function() { 
    // ... 
    }); 
});

來源

2014-11-22 01:06:26 Christopher

您的代碼未優化。無論如何，它不會工作，因爲您將事件附加到不存在的元素.closeMenu。

要將事件附加到隨時創建的元素（也是在頁面加載後），應該使用事件代理。在jQuery中，事件委託可通過on()和off()方法獲得。請參閱：http://api.jquery.com/on/

這裏的解決方案（未測試）：

$(document).on('click','.openMenu.', callback); 
$(document).on('click','.closeMenu.', callback);

此解決方案，因爲您將附加事件到目標的現有父。（我再說一遍：這段代碼沒有優化，菜單可以用更好的方式完成，但事件代理解決了這個典型的事件問題）。

更多關於事件委託看到http://learn.jquery.com/events/event-delegation/或谷歌......

來源

2014-11-22 01:18:41 taseenb

不是100％正確，元素本身確實存在，但不是選擇器中用來找到它的類 – charlietfl 2014-11-22 01:24:54

是但實際上它是一樣的。用類closeMenu標識的DOM元素不存在：它計數零個元素。 – taseenb 2014-11-22 01:28:52

在jQuery中切換類

回答

相關問題