jquery 点击功能时切换菜单图标

Question

我找到了很好的响应式叠加菜单教程 (http://thecodeblock.com/full-screen-overlay-navigation/)，但它充满了错误，所以我决定让它变得更好，post 它适合所有人，但现在我需要一些帮助。

他们为菜单 link（汉堡包菜单）放置了图像，所以我用很棒的字体制作了它，它的工作原理我有两个 classes btn-open with bars icon 和 btn-close with close图标。我也认为他们的 jquery 相当复杂，所以我写了一个新的，它非常简单，我只有一个问题，其他一切都正常。

JQUERY

$(document).ready(function(){
    $(".button a").click(function(){
        $(".overlay").fadeToggle(200);
       $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
 $('.overlay').on('click', function(){
   $(".overlay").fadeToggle(200);   
   $(this).toggleClass('btn-open').toggleClass('btn-close');
 open = false;
 });

CSS:

nav{
 text-align: center;
  width=100%;
 margin: 0 auto;
 position: relative;
 height: 110px;
 overflow: hidden;
}
nav ul{
 min-height: 55px;
 padding: 30px 0;
 text-align: center;
}
nav ul li a:hover{
 background-color: #f0f0f0;
}
nav ul li{
 display: inline-block;
}
nav ul li a{
 color: #000;
 display: inline-block;
 padding: 1em 3em;
 background-color: rgba(170, 170, 170, 0.06);
 text-decoration: none;
}
/*styling open close button*/
.button{
 display: inline;
 position: absolute;
 right: 50px;
 top: 40px;
 z-index: 999;
 font-size:30px;
}
.button a{
    text-decoration:none;
}
.btn-open:after {
 color:#333;
 content:"\f0c9";
 font-family:"FontAwesome";
 }

.btn-close:after {
 color:#fff;
 content:"\f00d";
 font-family:"FontAwesome";
 }
/*overlay*/
.overlay{
 display: none;
 position: fixed;
 top: 0;
 height: 100%;
 width: 100%;
 background: #333;
 overflow: auto;
 z-index:99;
}
.wrap{
 color: #fff;
 text-align: center;
 max-width: 1100px;
 margin: 0 auto;
}
.wrap ul.wrap-nav{
 border-bottom: 1px solid #575757;
 text-transform: capitalize;
 padding: 150px 0px 100px;
 z-index:99;
}
.wrap ul.wrap-nav > li{
 font-size: 22px;
 display: inline-block;
 vertical-align: top;
 width: 24%;
 position: relative; 
}
.wrap ul.wrap-nav > li a{
 color: #d6d6d6;
 display: block;
 padding: 8px 0;
 text-decoration: none;
}
.wrap ul.wrap-nav > li a:hover{
 color: #f0f0f0;
}
.wrap ul.wrap-nav ul{
 padding: 20px 0;
}
.wrap ul.wrap-nav ul li{
 display: block;
 font-size: 16px;
 width: 100%;
 color: #919191;
}
.wrap ul.wrap-nav ul li a{
 color: #fff;
}
.social{
 color: #c1c1c1;
 font-size: 16px;
 padding: 20px;
}




@media screen and (max-width: 48em) {
 .wrap ul.wrap-nav > li{
 width: 100%;
 padding: 20px 0;
 border-bottom: 1px solid #575757;
 }
 .wrap ul.wrap-nav{
 padding: 30px 0px 0px;
 }
 nav ul{
 opacity: 0;
 visibility: hidden;
 }

}

HTML

<nav>
 <ul>
 <li><a href="https://www.google.hr/">Company</a></li>
 <li><a href="https://www.google.hr/">Services</a></li>
 <li><a href="https://www.google.hr/">Social</a></li>
 <li><a href="https://www.google.hr/">Contact</a></li>
 </ul>
 <div class="button">
   <a class="btn-open" href="#"></a>
   </div>
 </nav>




 <div class="overlay">
 <div class="wrap">
 <ul class="wrap-nav">
 <li><a href="#">Company</a>
 <ul>
 <li><a href="#">About</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Workplace</a></li>
 </ul>
 </li>
 <li><a href="#">Services</a>
 <ul>
 <li><a href="https://www.google.hr/">Web Design</a></li>
 <li><a href="#">Consultanct</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Centers</a></li>
 </ul>
 </li>
 <li><a href="#">Social</a>
 <ul>
 <li><a href="#">Facebook</a></li>
 <li><a href="#">Twitter</a></li>
 <li><a href="#">Google Plus</a></li>
 <li><a href="#">LinkedIn</a></li>
 <li><a href="#">WhatsApp</a></li>
 </ul>
 </li>
 <li><a href="#">Contact</a>
 <ul>
 <li><a href="#">Address</a></li>
 <li><a href="#">Phone</a></li>
 <li><a href="#">Email</a></li>
 <li><a href="#">Map</a></li>
 </ul>
 </li>
 </ul>
 <div class="social">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, recusandae, magnam, sapiente, iure deleniti repudiandae est tempora repellat fugiat aliquid nihil assumenda non placeat cum minus aut qui. Ipsa, aut.
 </div>
 </div>
 </div>

所以就像我说的那样，我必须 classes btn-open 和 btn-close 。当我单击菜单按钮 (.button class) 时，我的图标会切换并且一切正常。但是，当我尝试在覆盖 $('.overlay').on('click' 时单击任意位置时制作切换图标时，显示 function() 不工作并且不切换图标

这是工作示例 http://codepen.io/riogrande/pen/gbXxdx

Answer 1

使用以下代码，以便当您在任何地方点击覆盖时显示切换图标：

$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

jquery 点击功能时切换菜单图标

jquery toggle menu icon when click function

html

css

jquery

toggle

font-awesome