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

我注意到只有当我第一次通过点击＆＃34; hamburger＆＃34;来切换课程时才会发生这种情况。然后我通过点击文档关闭它（如果我通过单击＆＃34; X＆＃34关闭它;一切正常对我来说）。然后，即使您没有指定文档，单击文档时的切换类也将切换相同的类。

我在文档点击时尝试了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/

菜单图标动画jQuery

2 个答案: