码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-02-23 15:49:57      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:slides   pos   ddd   lock   als   ems   log   new   点击   

大致效果是这样的:点击菜单出现蒙层,点击其他区域,该蒙层隐藏,很常见的一个效果,由于平时写整体的一个布局,写兄弟级用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点击其他区域,该区域隐藏

标签:slides   pos   ddd   lock   als   ems   log   new   点击   

原文地址:http://www.cnblogs.com/jnnnannan/p/6433301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!