jquery切换css类

这个jquery切换了两件事。 （1）css类和（2）显示div。 如果我在元素外部单击（菜单切换），切换效果很好，但如果我在元素内部单击，则div切换，但css类不会。 这是为什么？

在http://jsfiddle.net/aL7Xe/68/上实时预览

第二次单击“菜单切换”时，我需要添加的css类消失。

 Menu Toggle 
 
One
 
Two
 
Three
 
 
 this is more text  $('html').click(function() { $('#menucontainer').hide(); $('#menutoggle').removeClass('menutoggle'); }); $('#menuwrap').click(function(event){ event.stopPropagation(); }); $('#menutoggle').click(function(event){ $('#menucontainer').toggle(); $(this).addClass('menutoggle'); });  

Answer 1

 $('#menutoggle').click(function(event){ $('#menucontainer').toggle(); $(this).toggleClass('menutoggle'); }); 

http://jsfiddle.net/L5Cq3/

最少的线路可以达到预期的效果。

Answer 2

改变$(this).addClass('menutoggle'); to $(this).toggleClass('menutoggle');

Answer 3

这是因为，当您单击Menu容器时，将触发两个事件（即HTML单击处理程序和div单击处理程序）。

也许这就是你想要的：

 $('#menutoggle').click(function(event){ $('#menucontainer').toggle(); if ($(this).hasClass('menutoggle') $(this).removeClass('menutoggle'); else $(this).addClass('menutoggle'); }); 

编辑您可以使用toggleClass （也可以使用Juan来提醒我存在的情况）。 我很确定，在引擎盖下，它与我上面的代码所做的一样。

这是你固定的小提琴： http ： //jsfiddle.net/aL7Xe/69/