jquery入门事件绑定

需要准备内容：　

</style>

<body>
　　<div id="panel">
　　　　<h5 class="head" >jquery</h5>
　　<div class="content">
　　　　jquery 是prototype之后又一个优秀的JavaScript库，叭叭叭生死狙击多斯拉克开始看久违的卡
　　　　了吗开始看没Wii是；卢卡申科开始看开什么看电视看你瘦的
　　　</div>
　　</div>
</body>

以上是准备的html内容

基础版点击切换点击可以展示出隐藏内容
$("#panel h5.head").bind("click",function(){ //bind后面给了click点击事件
if ($(this).next().is(":visible")) {
$(this).next().hide();
}else
$(this).next().show();
})　　

因为上面出现了好几次 $(this).next()所以用var定义一个contents跟上面效果一样

$("#panel h5.head").bind("click",function(){ //bind后面给了click点击事件，判断如果已经显示了就隐藏起来，如果没有显示就展示
var $contents=$(this).next();
if($contents.is(":visible")){
$contents.hide();
}else{
$contents.show();
}
}

改变绑定事件的类型

把bind()里的click改成mouseover ，mouseout 点击事件就变成了鼠标滑动展示

$("#panel h5.head").bind("mouseover",function(){ 　　//mouseover 放上展示内容
$(this).next().show();
}).bind("mouseout",function(){ 　　　　　　　　 //mouseout 拿走收起内内容
$(this).next().hide();
}
)

posted on 2020-10-22 12:07 bigbig钊阅读(78) 评论(0) 收藏举报