Question

我的菜单有以下代码，问题是我希望它一旦我点击其中一个选项就隐藏/关闭，而不是关闭X按钮：

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

图标

<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

试试这个：

$( ".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（）），但这可能只是个人偏好。

DOCUMENTATION FOR BIND

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

1 个答案: