Question

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?

Live preview at http://jsfiddle.net/aL7Xe/68/

I need the added css class to go away when clicking on “Menu Toggle” the second time.

<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>

Answer 1

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

http://jsfiddle.net/L5Cq3/

Fewest lines to achieve desired result.