极客观点
项目管理
HarmonyOS
问题描述
如上图，我可以实现点击其中一个点，打开对应的产品。
//单个产品点击显示
var isTag = null;
$('.house').on('click','.hight-light',function(){
var proName = $(this).attr('data-name');
$('.show-item').map(function(index){
var showItem = $(this).attr('data-pro');
if(proName == showItem){
if(isTag && isTag.hasClass('show') && !$(this).hasClass('show')) return;
isTag = $(this).toggleClass('show');
$(this).find('.pro-contet').toggleClass('scale-one');
}else{
return false;
}
})
});也可以单击 X 关闭这个产品
//关闭单个产品显示
$('.show-item .close:not(.pro-contet)').on('click',function(e){
e.stopPropagation();
$(this).parent().removeClass("show");
$(this).siblings('.pro-contet').removeClass('scale-one');
}); 现在的问题是点击其它区域，怎么实现关闭这个产品呢？我尝试过好多办法，因为点击其它区域的事件是绑定在 document 上的，那么 X 关闭按钮就不起作用了； 要么就是其它点击事件都不执行了，只执行这个 document 上的事件。
问题出现的环境背景及自己尝试过哪些方法
我尝试过 这些方法：
a. 不管点哪里都会关掉：
$(document).mouseup(function(e){
var _con = $('.show-item'); // 设置目标区域
var _son = $('.coming-soon-warp');
if(!_con.is(e.target) && _con.has(e.target).length === 0){
$('.show-item').removeClass('show');
$('.pro-contet').removeClass('scale-one');
};
if(!_son.is(e.target) && _son.has(e.target).length === 0){
$('.coming-soon-warp').removeClass('show');
$('.pro-contet').removeClass('scale-one');
};
});b. 只要有这个方法存在，在这个范围内的其它方法都不起作用了
$(document).click(function (e) {
var target = $(e.target);
console.log(target);
if (!target.hasClass('show-item') && target.closest('.show-item').length <= 0) {
$('.show-item').removeClass("show");
}
});你期待的结果是什么？实际看到的错误信息又是什么？
1. 正确的动画是，点击各个 小点，弹出各个不同的产品 .show-item （巳实现）
2. 点击 .show-item X关闭按钮，关闭当前产品 （巳实现）
3. 点击除 .show-item 的其它区域，关闭当前产品 （未实现）
4. .show-item 中 learn more 点击后跳转，其它比如产品图片，标题这些区域，点击无反应 （未实现）
下面是这个布局的结构：<body>
<div class="locksys">
<div class="house">
//分布在房子上的各个点，这里只写一个
<a class="hight-light lever" data-item="Lever" data-name="UL3" style="left:24%;top:43%;"></a>
...
//各个点对应的产品，这里只写一个
<!--hight-light 单个点单个产品-->
<div class="show-item" data-pro="UL3">
<b class="close"></b>
<div class="pro-contet">
<img src="<?php echo Yii::app()->baseUrl;?>/images/home/ul3.png" alt="" class="item-pic" />
<div class="more">
<div class="discirption">
<h4>Ultraloq UL3 BT</h4>
<p>5-in-1 Smart Lever Lock</p>
<div class="icon-list">
<span class="icon-utec-ul1-fingerprint house-icon"></span>
<span class="icon-utec-app house-icon"></span>
<span class="icon-utec-key house-icon"></span>
<span class="icon-utec-code house-icon"></span>
</div>
<a href="<?php echo Yii::app()->createUrl('lock/ul3/bt');?>" class="button home-btn">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>请问有什么好的办法来实现第3点和第4点吗？
1 . 可以加一个透明的遮罩层 点击这个遮罩层 来关闭弹框
层级应该是： 文档 < 遮罩层 < 弹框
2 . 之所以你点任何地方会触发是因为你点击
show-item区域的东西 事件冒泡 触发document事件 只要给show-item的点击事件加上event.stopPropagation()阻止事件传递就行了