javascript - 菜单图标动画 jQuery

Question

当切换菜单中的导航图标被点击时，动画被触发(将“汉堡包”图标转换为“X”)并且导航菜单下拉。

当用户单击导航图标或在激活的切换菜单之外(菜单已下拉)时，“X”图标将变回“汉堡包”图标。

我遇到的问题是，即使切换菜单未处于事件状态(菜单未下拉)并且用户在页面上某处的导航栏外单击，导航图标动画仍会被触发。

感谢您提供有关找到此修复程序的任何帮助 :-)!

CSS:

/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #d3d3d3;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #d3d3d3;
left: 0;
}
.nav > li {
    display: block;
    border-bottom: 0.05em solid #000000;
}
.nav > li:last-child {
    border-bottom: none;
}
/*----/----global styles*/

/*logo*/
.logo {
float:left;
display: block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/

/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
cursor: pointer;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: black;
position: absolute;
-webkit-transition: -webkit-transform 0.5s ease-in-out, top 0.25s ease-        in-out 0.5s, opacity 0.25s ease-in-out 0.5s;
-moz-transition: -moz-transform 0.5s ease-in-out, top 0.25s ease-in-out 0.5s, opacity 0.25s ease-in-out 0.5s;
transition: transform 0.5s ease-in-out, top 0.25s ease-in-out 0.5s, opacity 0.25s ease-in-out 0.5s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
} 
/*----/----navigation icon*/

/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active         span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/

jQuery:

/*navigation icon animation*/
jQuery(document).ready(function() {
$('#toggle-menu').click(function(){
$(this).toggleClass('menu-is-active')
});

/* click outside of nav to trigger navigation icon animation*/
$(document).click(function() { $("#toggle-menu").toggleClass(); });         $("nav").click(function(e) { e.stopPropagation(); return false; });

/*----/----navigation icon animation*/

/*toggle menu*/
jQuery("#toggle-menu").click(function() {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function() { $(".nav").hide(); }); $("#toggle-      menu").click(function(e) { e.stopPropagation(); return false; });
/*----/----toggle menu*/

});

html:

<div class="header">
<div class="navbar">

<a href="" class="logo" style="display: inline-block;">LogoPlaceHolder</a>

<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>

</div>
</div>


<ul class="nav">
    <li><a href="" style="display: inline-block; width:100%;">Home</a>        </li>
    <li><a href="" style="display: inline-block; width:100%;">About</a></li>
    <li><a href="" style="display: inline-block; width:100%;">News</a></li>
    <li><a href="" style="display: inline-block; width:100%;">Contact</a></li>
</ul>

Answer 1

我注意到只有当我首先通过单击“汉堡包”切换类然后通过单击文档关闭它时才会发生此行为(如果我通过单击“X”关闭它，一切对我来说都很好)。然后，即使您没有指定，单击文档时的切换类也会切换相同的类。

我在单击文档时尝试了 removeClass() 而不是 toggleClass()，它对我来说效果很好。