<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.bg1 {
background-image:url(images/21.jpg);
background-repeat:no-repeat;
color:#0CF;
}
.bg2 {
background-image:url(images/22.jpg);
background-repeat:no-repeat;
color:#F00;
}
</style>
<script type="text/javascript">
//参数para1：希望隐藏元素的id值
function toggle1(para1){
if ($("#p2").attr("class")=="bg1")
{
$("#p2").attr("class","bg2");
}
else
{
$("#p2").attr("class","bg1");
}
$("#"+para1).toggle();
}
</script>
</head>
<body>
<p id="p1">此处将显示或隐藏</p>
<p id="p2" class="bg1" onClick="toggle1('p1')" style="height:31px">点击此处显示或隐藏上面部分并更换自己的样式(包括背景图、字体等）</p>
</body>
</html>
<!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>jquery点击toggle并改变图标src</title>
</head>
<script src="images/jquery-1.8.3.min.js"></script>
<script>
//函数实现
//参数para1：希望隐藏元素的id
//参数para2：希望改变图片src的img的id
/*
function toggle1(para1,para2){
if($("#"+para2).attr("src")=="images/col_24.jpg")
{
$("#"+para2).attr("src","images/col_11.jpg");
}
else
{
$("#"+para2).attr("src","images/col_24.jpg");
}
$("#"+para1).toggle();
}
*/
//jquery闭包实现
(function($){
$(document).ready(function(){
$("#div1").click(function(){
if($("#img1").attr("src")=="images/col_24.jpg")
{
$("#img1").attr("src","images/col_11.jpg");
}
else
{
$("#img1").attr("src","images/col_24.jpg");
}
$("#p1").toggle();
});
$("#div2").click(function(){
if($("#img2").attr("src")=="images/col_24.jpg")
{
$("#img2").attr("src","images/col_11.jpg");
}
else
{
$("#img2").attr("src","images/col_24.jpg");
}
$("#p2").toggle();
});
});
})(jQuery);
</script>
<body>
<!-- 函数实现html代码部分 -->
<!--
<div id="div1" onclick="toggle1('p1','img1')" style="350px;background-color:#0F3; height:30px; vertical-align:middle; line-height:30px;"><img id="img1" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p1并改变图标src</div>
<p id="p1">要隐藏的p1</p>
<div id="div2" onclick="toggle1('p2','img2')" style="350px;background-color:#F00; height:30px; vertical-align:middle; line-height:30px;"><img id="img2" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p2并改变图标src</div>
<p id="p2">要隐藏的p2</p>
-->
<!-- 闭包实现html代码部分 -->
<div id="div1" style="350px;background-color:#0F3; height:30px; vertical-align:middle; line-height:30px;"><img id="img1" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p1并改变图标src</div>
<p id="p1">要隐藏的p1</p>
<div id="div2" style="350px;background-color:#F00; height:30px; vertical-align:middle; line-height:30px;"><img id="img2" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p2并改变图标src</div>
<p id="p2">要隐藏的p2</p>
</body>
</html>
<!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>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
//para1:要隐藏的元素的id
function toggle1(para1) {
jQuery("#"+para1).toggle();
}
</script>
</head>
<body>
<p>点击div1，将在下面显示或隐藏div2</p>
<div onclick="toggle1('div2')" id="div1">div1</div>
<!-- 此处display默认为none，如果已开始要显示着，改为block -->
<div id="div2" style="display:none">div2</div>
</body>
</html>