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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
 });
该案例属于原创,转载需说明出处。


以上是关于jquery点击其他区域,该区域隐藏的主要内容,如果未能解决你的问题,请参考以下文章

CSS图像缩放以适应区域不扭曲

如果 Kentico 宏不包含 Web 部件,则隐藏小部件区域/Web 部件区域

jQuery实现点击div外的区域,来隐藏指定节点

如何在 iPad 应用程序隐藏状态栏区域中获取触摸事件?

jQuery实现鼠标点击Div区域外隐藏Div

js的事件冒泡和点击其他区域隐藏弹出层