首页 > 代码库 > jquery点击其他区域，该区域隐藏
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点击其他区域，该区域隐藏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。