如何把点击一个div弹出新div的js事件应用到多个可供点击的地方
如图，这是爱奇艺标签电影里的网页，点击上传弹出一个盒子，容纳对应的内容，当鼠标点击其他地方或者离开超过一秒，该盒子就消失。点击消息时同样如此，我自己瞎琢磨实现了点击消息时...
如图，这是爱奇艺标签电影里的网页，点击上传弹出一个盒子，容纳对应的内容，当鼠标点击其他地方或者离开超过一秒，该盒子就消失。 点击消息时同样如此，我自己瞎琢磨实现了点击消息时的效果，但js都和点击消息的div和它对应需要弹出或隐藏的盒子绑定到了一起。我想问问这应该都是同样的js效果，如何把它用到点击上传这个事件上，其实js效果一样，只要换个绑定事件的名称就行了，但真的要这样做吗？有没有什么好办法啊？
展开
2个回答
展开全部
如果想将相同的js效果运用到多个标签上，可以先使用class类选择器规划好想要运用的对象。然后使用js来统一获取这些对象。通过for循环来解决重复的劳动量（绑定按钮事件或者其他需要的效果）。具体写了一个例子，是菜单展开隐藏的效果，每个菜单都是独立的选项。
<html>
<head>
<meta charset="UTF-8">
<style>
#content{
display: block;
}
#content .btn{
width: 200px;
text-align: center;
position: relative;
display: inline-block;
background-color: #9bb6ff;
}
.btn_box{
width: 100%;
height: auto;
position: absolute;
left: 0px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<div id="content">
<div class="btn"><span>111</span>
<div class="btn_box">
弹出盒子内容111
</div>
</div>
<div class="btn"><span>222</span>
<div class="btn_box">
弹出盒子内容222
</div>
</div>
<div class="btn"><span>333</span>
<div class="btn_box">
弹出盒子内容333
</div>
</div>
</div>
</body>
<script>
//统一获得所有需要绑定按钮事件的元素
var btn = document.getElementsByClassName('btn');
//使用for循环统一绑定需要的事件
//for循环的大致逻辑是从第一个btn对象读取到最后一个
for(var i=0; i<btn.length; i++){
btn[i].onclick = function(){
var btn_box = this.querySelector('.btn_box');
if(btn_box.style.display != 'block'){
btn_box.style.display = 'block';
}else{
btn_box.style.display = 'none';
}
}
}
</script>
</html>
具体可以研究一下，纯手打，望采纳。
追问
请问大神，鼠标离开btn和btn_box的事件也写在for循环里吗
追答
对，for循环你可以理解成对多个目标重复的执行一段相同的代码。如果你需要鼠标离开事件，写到for循环内就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个其实就是事件绑定和事件冒泡的问题。
首先，是盒子（也叫弹出框）消失。
第一，点击其它地方消失，只需要在body元素上绑定一个盒子消失的事件。但是为了避免点击盒子自己也消失，盒子上所有的点击事件，需要阻止事件冒泡。这里，需要注意：如果某些地方，点击的时候不想让盒子消失，那么，此处的点击事件就要阻止事件冒泡；如果某些地方有阻止事件冒泡的代码，而又需要盒子消失的，在此处还需要添加盒子消失的代码。事件冒泡的方法是stopPropagation。百度下就知道。
第二，移出盒子，盒子消失。只需要给盒子绑定下鼠标移出事件，mouseleave即可
首先，是盒子（也叫弹出框）消失。
第一，点击其它地方消失，只需要在body元素上绑定一个盒子消失的事件。但是为了避免点击盒子自己也消失，盒子上所有的点击事件，需要阻止事件冒泡。这里，需要注意：如果某些地方，点击的时候不想让盒子消失，那么，此处的点击事件就要阻止事件冒泡；如果某些地方有阻止事件冒泡的代码，而又需要盒子消失的，在此处还需要添加盒子消失的代码。事件冒泡的方法是stopPropagation。百度下就知道。
第二，移出盒子，盒子消失。只需要给盒子绑定下鼠标移出事件，mouseleave即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
