## js前端手风琴效果事件委托

最新推荐文章于 2024-07-24 23:00:08 发布

Experience_life

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量271

点赞数

分类专栏：事件委托手风琴前端文章标签：前端 javascript css html

本文链接：https://blog.csdn.net/Experience_life/article/details/121265016

版权

事件委托同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

手风琴

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴事件委托</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.warp{
width: 600px;
height: 100%;
color: white;
margin: 0 auto;
}
h4{
width: 600px;
height: 50px;
color: white;
line-height: 50px;
text-align: center;
background: black;
border-top: 1px solid #ccc;
}
p{
width: 600px;
height: 105px;
text-align: center;
background: red;
display: none;
}
</style>
</head>
<body>
<div class="warp">
<div>
<h4>《抉择》</h4>
<p class="jz">
大千世界，茫茫人海。变幻的世界，让我们在人生的旅途中不断的选择，其实，人的一生就是在不断的选择。每当我们站在人生的十字路口时，交警是我们自己，自己选择要去的方向。在人生中，人生所给予我们的是有限的，属于我们的，我们要珍惜，不我们应得的，那就别去强求，有时放弃才是我们最好的选择。人生绽放光彩时，总是在我们做出完美的选择。
</p>
</div>
<div>
<h4>《生命》</h4>
<p class="sm">
生命的力量似乎一株小草的力量，一颗小小的种子在春天被种下，在在夏天就已经铺满大地，给大地铺上了绿地毯，一颗貌不惊人，相貌平平的种子能冲破坚硬的土地，其力量是多么的大，种子的力量如此，我们人呢？既然高等动物，其生命力然也很大，可是也有的人生命力“”不大“”因为他们的生命力虽然大，可他们却没有为社会做出贡献，种子的力量之所以大
</p>
</div>
<div>
<h4>《渺小》</h4>
<p class="mx">
我们这么渺小，世界大的容得下所有巧合与奇迹，没有谁能阻挡一个人与另一个人的相遇与分别，心心念念着，就像那滚入沙发底下的纽扣，在你以为快要淡忘的时候，又忽然落入你的眼睛，你把它叫做幸福，或者巧合，或者不可思议。
</p>
</div>
<div>
<h4>《坚强》</h4>
<p class="jq">
学会孤独，没有谁会把你当宝护着，世界总是孤单的学会坚强，其实一个人也可以活得漂亮，自己笑给自己看，自己哭给自己听学会忍耐，该闭嘴就闭嘴，该沉默就沉默学会珍惜，知心的朋友已经不多...
</p>
</div>
</div>
</body>
<script type="text/javascript">
var odiv=document.getElementsByClassName('warp')[0];
var op=document.getElementsByTagName('p');
odiv.οnmοuseοver=function(ev){
var e=ev||window.event;
var t=e.target||e.srcElement;
//t的元素节点转换小写
if(t.nodeName.toLowerCase()=='h4'){
//后一个元素取消隐藏
t.nextElementSibling.style.display='block';
}
//移除div 重新隐藏
odiv.onmouseout =function(){
for(var i=0;i<odiv.children.length;i++){
op[i].style.display='none';
}
}
}
</script>
</html>

Experience_life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
## js前端手风琴效果事件委托

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>手风琴效果</title> <style type="text/css"> *{ margin: 0; padding: 0; } ...
复制链接

扫一扫

专栏目录