菜单图标动画jQuery

Question

When the navigation icon in the toggle menu is clicked an animation is triggered (transforming the "hamburger" icon to an "X") and the navigation menu drops down.

When a user clicks the navigation icon or outside of the activated toggle menu (menu has dropped down) the "X" icon will change back to the "hamburger" icon.

The issue I'm having is that even when the toggle menu is not active (menu has not dropped down) and the user clicks outside of the navbar somewhere on the page the navigation icon animation is still being triggered.

Any help on finding the fix for this is appreciated :-)!

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

I notice this behaviour happens only if I first toggle class by clicking on the "hamburger" and then I close it by clicking on the document (if I close it by clicking on the "X" everything works fine to me). Then the toggle class at the document click will toggle the same class even if you didn't specify it.

I tried removeClass() at the document click instead of toggleClass() and it worked fine for me.

Answer 2

Simple solution:

/ navigation icon animation /

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*/

});

Fiddle: https://jsfiddle.net/wexd3spp/14/