在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,但它不会隐藏菜单。
我会感激你的帮助
$('.closeMenu')
在你的代码运行时不存在。
您可以轻松地将2个处理程序合并为一个,或使用事件委派。
,结合它们看起来是这样的:
$('.openMenu').click(function() {
var leftAmt = $(this).is('.closeMenu') ? '-100%' : '0%';
$('#menu').animate({
left: leftAmt
},500);
$(this).toggleClass('openMenu closeMenu');
});
我可能向后有这样和$('.openMenu')
不会在页面加载存在(取决于初始元素的状态),只是改变了开始选择,如果这是案件
我怀疑事件代表团是你在这里后。不要使用jQuery的.click方法,而应考虑使用.on方法,并在其中提供选择器。
$(document).ready(function() {
$(document).on("click", ".openMenu", function() {
// ...
});
$(document).on("click", ".closeMenu", function() {
// ...
});
});
您的代码未优化。无论如何,它不会工作,因为您将事件附加到不存在的元素.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/或谷歌......
不是100%正确,元素本身确实存在,但不是选择器中用来找到它的类 – charlietfl 2014-11-22 01:24:54
是但实际上它是一样的。用类closeMenu标识的DOM元素不存在:它计数零个元素。 – taseenb 2014-11-22 01:28:52
包括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