1

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

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

第二次单击“菜单切换”时，我需要添加的 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>
4

3 回答 3

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

http://jsfiddle.net/L5Cq3/

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

于 2012-06-12T23:53:44.617 回答
1

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

于 2012-06-12T23:49:21.377 回答
1

这是因为，当您单击 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/

于 2012-06-12T23:50:14.463 回答