jquery点击其他区域，该区域隐藏

大致效果是这样的：点击菜单出现蒙层，点击其他区域，该蒙层隐藏，很常见的一个效果，由于平时写整体的一个布局，写兄弟级用z-index控制就可以实现，这次遇到的情况是该别人的代码，对方代码都分模块了，不好直接加，如图：                                                                      

 

 

                         

 

点击非蒙层区域，该区域隐藏：css代码：

            body{

                margin: 0;

                padding: 0;

            }

            .cor{

                background: #DDDDDD;

                height: 3em;

            }

            .pad{

                padding: 0.5em 0.8em;        

            }

            .setimg{

                height: 2em;

                width: 2.2em;

            }

            .font{

                line-height: 1.4em;

                font-size: 1.4em;

                color: #FFFFFF;

                padding-left: 0.4em;

            }

            .mag{

                margin: 0.3em 0.8em;

                }

            .box{

                height: 2.4em;

                width: 85%;

            }

            .search{

                height: 2.4em;

                width: 1.5em;

                background: #ffffff;

            }

            .set_search{

                height: 1.8em;

                width: 1.5em;

            }

            .txt{

               height: 2.4em;

               width: 17em; 

               border-color: transparent;

            }

            .set_h{

                height: 18em;

            }

            .swiper-container {

                width: 100%;

                height: 100%;

                margin-left: auto;

                margin-right: auto;

            }

            .swiper-slide {

                text-align: center;

                background: #fff;

        

               

                display: -webkit-box;

                display: -ms-flexbox;

                display: -webkit-flex;

                display: flex;

                -webkit-box-pack: center;

                -ms-flex-pack: center;

                -webkit-justify-content: center;

                justify-content: center;

                -webkit-box-align: center;

                -ms-flex-align: center;

                -webkit-align-items: center;

                align-items: center;

            }

            .tu{

                width: 100%;

                height: 18em;

            }

            .fa-3x{

                color: #DDDDDD;

                opacity: 0.5;

            }

            .con{

                display:inline-block;

                height: 1.5em;

                line-height: 1.5em;

                width: 1.5em;

                border-radius: 50%;

                background: #D40000;

                font-size: 0.5em;

                color: #FFFFFF;

                text-align: center;

                position: absolute;

                top: 0em;

                left:2em; 

            }

            #mengc{

                width: 75%;

                background: #000;

                opacity:0.5;

                color:#FFF;

                z-index:10000;

                padding:0.4em;

                position: absolute;

                top: 0em;

                left: 0em;

                display: none;

            }

       

html代码：

JS代码：

//分类菜单的显示隐藏

 var fla = true; 

 $('#mengc').on('click',function(e){ 

 fla = false; return false; 

 });

 $('body').click(function(e){ 

 fla=true; 

 if(fla){

 $("#mengc").hide(); 

 }

 }); 

 $('.font').click(function(){ 

 fla = false;

 $("#mengc").css("display","block"); 

 return false;

 }); 

 //购物车角标 

 var con =$('.con').text();

 if(con==""||con==null||con==0){ $('.con').hide(); } 

 //轮播 var swiper = new Swiper('.swiper-container', { 

 pagination: '.swiper-pagination',

 nextButton: '.swiper-button-next',

 prevButton: '.swiper-button-prev',

 slidesPerView: 1, 

 paginationClickable: true, 

 spaceBetween: 30,

 loop: true

 });

该案例属于原创，转载需说明出处。

转载于:https://www.cnblogs.com/jnnnannan/p/6433301.html