jquery toggle значок меню при нажатии функции

Question

Я нашел хороший учебник для отзывчивого меню наложения (http://thecodeblock.com/full-screen-overlay-navigation/), но его полный ошибок, поэтому я решил сделать его лучше и опубликовать его для всех, но теперь мне нужна помощь.

Они помещают изображения для ссылки меню (меню гамбургера), поэтому я сделал это с помощью шрифта awesome, и его работа у меня есть два класса btn-open с значками баров и btn-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> 

Так как я сказал, что я должен классов БТН-открытых и БТН-близко. Когда я нажимаю кнопку меню (класс .button), мои иконки переключаются, и все работает отлично. Но когда я пытаюсь сделать значок переключения, когда вы нажимаете где-нибудь, когда накладывается $ ('. Overlay'). On ('click', функция() показывает, что она не работает, а ее непереключаемые значки

Вот рабочий пример 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; 
});