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

Show/hide jQuery menu click functions

本文关键字：单击 功能 菜单 jQuery 隐藏 显示      更新时间：2023-09-26

我的菜单有以下代码，问题是我希望它在我单击其中一个选项后立即隐藏/关闭，而不是在 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");
});

试试这个：

$( ".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（））也取得了最好的结果，但这可能只是个人喜好。

绑定文档

相关文章：