显示/隐藏jQuery菜单单击功能

Question

I have the following code for my menu, the trouble is I want it to hide/close as soon as I click on one of the options, instead of closing at the X button:

THIS IS THE HTML

MENU

<div class="mobilenav"> 
 <li><a href="#">HOME</a></li> 
 <li><a href="#">SERVICES</a></li> 
 <li><a href="#">WORK</a></li> 
<li><a href="#">TALK</a></li> 
</div>

ICON

<a href="javascript:void(0)" class="icon"> 
<div class="MENU"> 
 <div class="menui top-menu"></div> 
 <div class="menui mid-menu"></div> 
 <div class="menui bottom-menu"></div> 
</div> 
</a>

AND JS

$(document).ready(function () {
$(".icon").click(function () {
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
});

Answer 1

Try this:

$( ".icon" ).bind( "click", function() {
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
});

This will bind the click function to the class. Also a side-note watch where you place your scripts. From personal experience I've had best results putting all js code (inline and external) right before the tag (even when using document.ready()) but this is probably just personal preference.

DOCUMENTATION FOR BIND