Question

我找到了很好的教程，用于响应式叠加菜单（http://thecodeblock.com/full-screen-overlay-navigation/），但它充满了错误，所以我决定让它变得更好，并为每个人发布它，但现在我需要帮助。

他们把图像用于菜单链接（汉堡包菜单），所以我用字体很棒，它的工作我有两个类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>

就像我说我必须上课btn-open和btn-close。当我点击菜单按钮（。按钮类）时，我的图标正在切换，一切正常。但是，当我点击任何地方点击覆盖$（＆＃39; .overlay＆＃39;）时，我尝试制作切换图标。（＆＃39;点击＆＃39;，显示功能（）不起作用且不切换图标

以下是工作示例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切换菜单图标

1 个答案: