显示/隐藏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>

图标

<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");
});

这会将click函数绑定到该类。 还要注意放置脚本的旁注。 从个人经验来看，我将所有js代码（内联和外部）放在标签之前（即使在使用document.ready（）时）也取得了最佳效果，但这可能只是个人喜好。

绑定文件