有html页面内容如下：
<body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body>
需要实现点击标题显示和隐藏段落的功能。
第一种通过点击方法实现，代码如下，需要注意is(":visible")的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title></title>
<script>
$(function(){
$("#hh").click(function(){
if($(this).next().is(":visible")){
$(this).next().hide();
}
else{
$(this).next().show();
}
});
});
</script>
</head>
<body>
<h5 id="hh">关于jQuery的介绍</h5>
<p id="p1">jQuery是一门前端编程语言</p>
</body>
</html>
第二种方法通过toggle使用，当toggle代码如下时，效果是先出现一段文字
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title>toggle</title>
<script>
$(function(){
$("#hh").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
</script>
</head>
<body>
<h5 id="hh">关于jQuery的介绍</h5>
<p id="p1">jQuery是一门前端编程语言</p>
</body>
</html>
而要实现点击切换的效果，新的jQuery代码应该是：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title>toggle</title>
<script>
$(function(){
$("#hh").click(function(){
$(this).next().toggle(600);
},function(){
$(this).next().toggle(600);
})
})
</script>
</head>
<body>
<h5 id="hh">关于jQuery的介绍</h5>
<p id="p1">jQuery是一门前端编程语言</p>
</body>
</html>
时间： 2024-10-11 13:50:22