jquery切换css类答案

【问题标题】：jquery toggle css classjquery切换css类
【发布时间】：2012-06-12 23:46:16
【问题描述】：

这个 jquery 切换了两件事。 (1) 一个 css 类和 (2) 显示一个 div。如果我在元素外部单击（菜单切换），切换效果很好，但是如果我在元素本身内部单击，div 会切换，但 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>

【问题讨论】：

标签： jquery css toggle addclass

【解决方案1】：

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

http://jsfiddle.net/L5Cq3/

达到预期结果的最少行数。

【讨论】：

【解决方案2】：

将$(this).addClass('menutoggle'); 更改为$(this).toggleClass('menutoggle');

【讨论】：

嗨，Juan，我有一个 a:hover css 类集，我想在您单击链接时将其删除。我以为它只是 $(this).removeClass('a:hover'); beattrack.net/test.php 上有一个实时预览。提前致谢！
"a:hover" 实际上不是一个类。它是一个伪类（参见w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes）。我不知道是否有你想要的纯 css 解决方案。考虑添加一个特定的类onmouseover 元素，然后删除它onmouseout。然后，点击后，停止添加类onmouseover。

【解决方案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/

【讨论】：