菜单图标动画jQuery

单击切换菜单中的导航图标时，会触发一个动画（将"汉堡包"图标转换为"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>