菜单图标动画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()，它对我来说效果很好。

Answer 2

简单的解决方案：

/导航图标动画/

var trigger='X';

jQuery(document).ready(function () {
    $('#toggle-menu').click(function () {
        trigger='X';
        $(this).toggleClass('menu-is-active')

    });

    /* click outside of nav to trigger navigation icon animation*/
    $(document).click(function () {


        if (trigger=='X')
        {
          $("#toggle-menu").toggleClass();
          trigger='ham';
        }



    });
    $("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*/

});

小提琴：https://jsfiddle.net/wexd3spp/14/