您的位置：首页 > Web前端 > JQuery

jquery bind click mouseout hover mouseover事件

2012-12-31 17:07 120 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css">

.highlight{

background:#FF3300;

}

</style>

<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("#panel h5.head").bind("click",function(){

if($(this).next("div.content").is(":visible")){

$(this).next("div.content").hide();

}else{

//$(this).next("div.content").show();

//$(this).next("div.content").fade(2000);

$(this).next("div.content").slideDown(100);

}

})

$("#panel1 h5.head1").bind("mouseout",function(){

$(this).next("div.content1").hide();

})

$("#panel1 h5.head1").bind("mouseover",function(){

$(this).next("div.content1").show();

})

$("#panel2 h5.head2").hover(function(){

$(this).next("div.content2").show();

},function(){

$(this).next("div.content2").hide();

})

$("#panel3 h5.head3").mouseover(function(){

$(this).next("div.content3").show();

})

$("#panel3 h5.head3").mouseout(function(){

$(this).next("div.content3").hide();

})

$("#panel4 h5.head4").toggle(function(){

$(this).addClass("highlight")

$(this).next("div.content4").show();

},function(){

$(this).removeClass("highlight");

$(this).next("div.content4").hide();

})

$("#panel5 h5.head5").bind("mouseout mouseover",function(){

if($(this).next("div.content5").is(":visible")){

$(this).next("div.content5").hide();

}else{

$(this).next("div.content5").show();

}

})

})

</script>

<body>

<div id="panel">

<h5 class="head">点击一下吧</h5>

<div class="content" style="display:none">

点击之后我出来了

</div>

</div>

<div id="panel1">

<h5 class="head1">鼠标移到这现实</h5>

<div class="content1" style="display:none">

我显示了

</div>

</div>

<div id="panel2">

<h5 class="head2">使用了hover(自定义方法)</h5>

<div class="content2" style="display:none">

我显示了

</div>

</div>

<div id="panel3">

<h5 class="head3">使用了mouseout,mouseover</h5>

<div class="content3" style="display:none">

我显示了

</div>

</div>

<div id="panel4">

<h5 class="head4">使用toggle</h5>

<div class="content4" style="display:none">

我显示了

</div>

</div>

<div id="panel5">

<h5 class="head5">bind绑定多个事件</h5>

<div class="content5"style="display:none" >

我显示了

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航