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;	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

愿你需要这个。请查看我的更新小提琴

Working Fiddle Here

只需在body-overlay上编写点击功能

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

在Click body关闭侧边栏菜单上

1 个答案: