1、採用事件綁定bind()
<!DOCTYPE html>
<html>
<head>
<title>Char 4.1.2</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.content{
display: none;//給元素一開始設置爲隱藏
}
</style>
<script type="text/javascript">
$(function(){
//1、找到標題所在的元素，綁定bind
$("#titles h2.head1").bind("click",function() {
//2.找到內容所在元素，設置爲contents
var $contents=$(this).next();
//3.判斷是否是隱藏的
if($contents.is(":visible")){
$contents.hide();
}else{
$contents.show();
}
})
})
</script>
</head>
<body>
<div id="titles">
<h2 class="head1">what is jquery?</h2>
<div class="content">
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>CHar 4.1.3</title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px
}
#div1 {
width: 300px;
border: 1px solid #0050D0
}
.head1 {
height: 24px;
line-height: 24px;
text-indent: 10px;
background: #96E555;
cursor: pointer;
width: 100%;
}
.content {
padding: 10px;
text-indent: 24px;
border-top: 1px solid #0050D0;
display: none;
}
.highlight {
background-color: #ff3300;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#div1 h3.head1").mouseover(function() {
$(this).addClass('highlight');
$(this).next().show();
}).mouseout(function() {
$(this).removeClass('highlight');
$(this).next().hide();
})
})
</script>
</head>
<body>
<div id="div1">
<h3 class="head1">jquery</h3>
<div class="content">this is the jquery.the best!!</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>CHar 4.1.3</title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px
}
#div1 {
width: 300px;
border: 1px solid #0050D0
}
.head1 {
height: 24px;
line-height: 24px;
text-indent: 10px;
background: #96E555;
cursor: pointer;
width: 100%;
}
.content {
padding: 10px;
text-indent: 24px;
border-top: 1px solid #0050D0;
display: none;
}
.highlight {
background-color: #ff3300;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<!-- hover -->
<!-- <script type="text/javascript">
$(function(){
$("#div1 h3.head1").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
})
</script> -->
<!-- toggle!!!!!!! -->
<script type="text/javascript">
$(function() {
$("#div1 h3.head1").toggle(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
})
</script>
</head>
<body>
<div id="div1">
<h3 class="head1">jquery</h3>
<div class="content">this is the jquery.the best!!</div>
</div>
</body>
</html>