在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中切换类

回答

相关问题