沁园春.雪(阻止事件冒泡)案例
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.detail-box{
width: 600px;
}
.detail-title{
padding: 20px;
background: green;
}
.detail-title h3{
margin: 0;
font-size: 1em;
}
.detail-content{
display: none;
padding: 20px;
border: 1px solid #ccc;
}
</style>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<h1>jQuery事件</h1>
<hr/>
<div class="detail-box">
<div class="detail-title">
<h3>沁园春.雪</h3>
</div>
<div class="detail-content">
北国风光，千里冰封，万里雪飘。<br/>
望长城内外，惟余莽莽；大河上下，顿失滔滔。<br/>
山舞银蛇，原驰蜡象，欲与天公试比高。<br/>
须晴日，看红装素裹，分外妖娆。<br/>
江山如此多娇，引无数英雄竞折腰。<br/>
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。<br/>
一代天骄，成吉思汗，只识弯弓射大雕。<br/>
俱往矣，数风流人物，还看今朝。<br/>
</div>
</div>
<script type="text/javascript">
$(function (){
$('.detail-title').mouseover(function (event) { //mouseover鼠标经过
$(this).next('.detail-content').stop().slideDown(); //stop()阻止冒泡 slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
}).mouseout(function (event){
$(this).next('.detail-content').stop().slideUp(); //slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
});
});
</script>
</body>
</html>
运行结果:
当鼠标在沁园春.雪上的时候会显示
当鼠标不在沁园春.雪上则不会显示
要点:1. 掌握阻止冒泡方法 stop()
2.mouseover鼠标经过
3.slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
