jquery toggle css类

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

我需要添加CSS类走的“菜单切换”第二次点击的时候。

<div id="menuwrap"> 
<a href="#" id="menutoggle">Menu Toggle</a> 
<ul id="menucontainer"> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
</ul> 
</div> 
this is more text 

<script> 
$('html').click(function() { 
$('#menucontainer').hide(); 
$('#menutoggle').removeClass('menutoggle'); 
}); 

$('#menuwrap').click(function(event){ 
event.stopPropagation(); 
}); 

$('#menutoggle').click(function(event){ 
$('#menucontainer').toggle(); 
$(this).addClass('menutoggle'); 
}); 
</script>

来源

2012-06-12 mr.musicman

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

http://jsfiddle.net/L5Cq3/

最少的线实现期望的结果。

来源

2012-06-12 23:53:44 Fresheyeball

非常好。谢谢。 –

变化$(this).addClass('menutoggle');到$(this).toggleClass('menutoggle');

来源

2012-06-12 23:49:21

完美。谢谢。 –

嘿胡安，我有一个：悬停CSS类集，我想要删除它，当你点击链接。我认为它只是$（this）.removeClass（'a：hover'）; beattrack.net/test.php上有实时预览。提前致谢！ –

“a：悬停”es实际上不是一个班级。它是一个伪类（参见http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes）。我不知道是否有一个纯粹的CSS解决方案，你想要什么。考虑添加一个特定的类“onmouseover”元素，然后删除它'onmouseout'。然后，点击后，停止添加类'onmouseover'。 –

这是因为，当您单击菜单容器上，这两个事件被触发（即HTML单击处理程序，并在div点击处理）。

也许这就是你想要什么：

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

编辑你可以只使用toggleClass（学分娟提醒我的存在），以及。我很确定，在引擎盖下，它和我上面的代码做的一样。

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

来源

2012-06-12 23:50:14 xbonez

也很好用。谢谢您的意见。 –

jquery toggle css类

回答

相关问题