jQuery的切换CSS类 [英] jquery toggle css class

问题描述

此jquery切换了两件事. (1)一个CSS类，(2)显示一个div.如果在元素外部单击(菜单切换)，则切换效果很好，但如果在元素本身内部单击，则div切换，但css类不会.为什么会这样?

This jquery toggles two things. (1) A css class and (2) displaying a div. The toggle works great if I click outside the element (Menu Toggle), but if I click inside the element itself, the div toggles, but the css class won't. Why is that?

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>

推荐答案

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

http://jsfiddle.net/L5Cq3/

以最少的线条达到预期的效果.

Fewest lines to achieve desired result.

这篇关于jQuery的切换CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！