Show/hide jQuery 菜单点击功能
Show/hide jQuery menu click functions
我的菜单有以下代码,问题是我希望它在我单击其中一个选项后立即 hide/close,而不是在 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");
});
这会将点击功能绑定到 class。还有一个旁注手表,您可以在其中放置脚本。根据个人经验,我将所有 js 代码(内联和外部)都放在标签之前(即使使用 document.ready() 时)效果最好,但这可能只是个人偏好。