on Click body close sidebar menu

Question

Я создал меню переключения боковой панели, когда я открываю и закрываю его работы, но проблема в том, что я хочу закрыть боковую панель для переключения на оверлей тела.

Любая помощь была бы принята с благодарностью.

код ниже:

$(document).ready(function() { 
 
      $(function() { 
 
       $('.panel-arrow').click(function() { 
 
        if ($(this).hasClass('show')) { 
 
         $(".body-overlay").fadeIn(500); 
 
         $(".panel-arrow, .side-menu-panel").animate({ 
 
          left: "+=300" 
 
         }, 700, function() { 
 
          // Animation complete. 
 
         }); 
 
         $(this).html('<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQI_GgiTYKrjmlf1Hg4UknzhYRTq-Qq_XsBuPrw98n0drNA5ZSj"/>').removeClass('show').addClass('hide'); 
 

 
        } 
 
        else { 
 
         $(".body-overlay").fadeOut(400); 
 
         $(".panel-arrow, .side-menu-panel").animate({ 
 
          left: "-=300" 
 
         }, 700, function() { 
 
          // Animation complete. 
 
         }); 
 
         $(this).html('<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/256/navigate-right-icon.png"/>').removeClass('hide').addClass('show'); 
 

 
        } 
 

 

 
       }); 
 

 

 
      }); 
 

 
     });

*{margin:0px; padding:0px;} 
 
ul{margin:0px, padding:0px;} 
 
.panel-arrow img { width:35px; height:auto;} 
 

 
/* -- Side Master Menu -- */ 
 
.side-menu-panel                  { width:300px; float:left; height:100%; background:#373737; position:fixed; left:-300px; top:10px; z-index:10000;} 
 
.body-overlay                  { display:none; background:rgba(0,0,0,0.5); opacity 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position:fixed; right: 0; top: 0; width:100%; height:100%; z-index:9999;} 
 
.panel-arrow                   { float:left; background:#191919; \t font:bold 14px Arial, Helvetica, sans-serif; color:#000 !important; text-decoration:none; text-align:center; height:35px; line-height:35px; position:fixed; left:0; top:10px;} 
 

 
.master-side-nav                  { background-color:#191919; height:100%; position:relative; width:100%; font-family:Arial;} 
 
.master-side-nav .title                { background-color:#ff9205; color:#fff; font-family:arial; font-size:15px; width:100%; float:left; font-weight:bold; padding:7px; text-align:left; text-transform:uppercase;} 
 
.master-side-nav ul, .master-side-nav ul li           { float:left; width:100%; margin:0px;} 
 
.master-side-nav ul li                { list-style:none; border-bottom:1px solid #0c0c0c;} 
 
.master-side-nav ul li:last-child             { border-bottom:0;} 
 
.master-side-nav ul li a                { background-color:#191919; color:#d2dbda !important; display:block; font-family:arial; font-size:13px; font-weight:100; padding:3%; text-align:left; width:94%;} 
 
.master-side-nav ul li a:hover, .master-side-nav ul li a:focus, 
 
.master-side-nav ul li a:active              { background-color:#0d0d0d; text-decoration:none;} 
 
/* -- Side Master Menu -- */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="side-menu-panel"> 
 
    <div class="master-side-nav"> 
 
     <div class="title">Menu</div> 
 
     <ul> 
 
      <li><a href="supplierProductShowcase.aspx?suppid=<%=suppid %>" onclick="supplierProductShowcase.aspx?suppid=<%=suppid %>">Add/Edit showcase</a></li> 
 
      <li><a href="SupplierProductDetailsDesign.aspx?suppid=<%=suppid %>" onclick="SupplierProductDetailsDesign.aspx?suppid=<%=suppid %>">Add/Edit product details</a></li> 
 
      <li><a href="product-master.aspx?suppid=<%=suppid %>" onclick="product-master.aspx?suppid=<%=suppid %>">Add products</a></li> 
 
      <li><a href="AddSupplierProduct.aspx?suppid=<%=suppid %>" onclick="AddSupplierProduct.aspx?suppid=<%=suppid %>">Add products to showcase</a></li> 
 
      <li><a href="supplier-showroom.aspx?suppid=<%=suppid %>" onclick="supplier-showroom.aspx?suppid=<%=suppid %>">My Showcase</a></li> 
 
       <li><a href="SupplierInventory.aspx?suppid=<%=suppid %>" onclick="SupplierInventory.aspx?suppid=<%=suppid %>">Inventory Details </a></li> 
 
      <li><a href="supplier-order.aspx?suppid=<%=suppid %>" onclick="supplier-order.aspx?suppid=<%=suppid %>">Order (<%=order_count %>) </a></li> 
 
      <li><a href="sales-history.aspx?suppid=<%=suppid %>" onclick="sales-history.aspx?suppid=<%=suppid %>">Sales History</a></li> 
 
      <li><a href="supplier-county-master.aspx?suppid=<%=suppid %>" onclick="supplier-county-master.aspx?suppid=<%=suppid %>">Masters</a></li> 
 
      <li><a href="#">Reports</a></li> 
 
      <li><a href="supplier-dashboard.aspx?suppid=<%=suppid %>" onclick="supplier-dashboard.aspx?suppid=<%=suppid %>">Dashboard</a></li> 
 
     </ul> 
 
    </div> 
 
    <a href="javascript:void(0);" class="panel-arrow show" style="display:block;"><img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/256/navigate-right-icon.png"/></a> 
 
</div> 
 
<div class="body-overlay"></div>

Answer 1

Может вам нужно this.Checkout моей обновленной скрипки

Working Fiddle Here

Просто написать функцию щелчка на тело-наложению

$('.body-overlay').click(function(){ 
    $('.panel-arrow').trigger('click'); 
});