Показать/скрыть jQuery меню нажмите функции

Question

У меня есть следующий код для моего меню, проблема в том, что я хочу, чтобы он скрывался/закрывался, как только я нажимаю на один из вариантов, вместо того, чтобы закрывать кнопку X:

Это HTML

МЕНЮ

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

И 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

Попробуйте это:

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

Это будет связать функцию щелчка к классу. Также обратите внимание на боковые заметки, где вы размещаете свои скрипты. Из личного опыта у меня были лучшие результаты, поместив весь js-код (встроенный и внешний) прямо перед тегом (даже при использовании document.ready()), но это, вероятно, только личное предпочтение.

DOCUMENTATION FOR BIND