Jquery显示隐藏改变图片的问题

[wqvbugvv]

<script type="text/javascript">
    $(function() {
        $(".title").each(function(index) {
            var titleid = $(this).attr("id");
            $("#" + titleid + "_child").hide();
        });
        $("#baseinfo_child").show();
        $("#baseinfo img").attr("src", "/images/groupExpanded.gif");
    })
    $(".title").click(function() {
        var titleid = $(this).attr("id");
        $("#" + titleid + "_child").toggle("slow", function() {
            $("#" + titleid + ":hidden img").attr("src", "/images/groupUnexpanded.gif");
            $("#" + titleid + ":visible img").attr("src", "/images/groupExpanded.gif");
        });

    });
</script>

首先是把所有的child隐藏，只显示第一个标题的child
然后点击一个title（标题栏）的时候，如果原来是隐藏的就显示，原来是显示的就隐藏（toggle）。这时标题的图片也应该跟着变化。
但很奇怪的是，只有第一次有效果。也就是当前是显示点击隐藏的时候图片改变了。以后图片就不改变了。我觉得代码没错啊。哪位帮忙看看！

[liangws]

楼主把html也简单法出来看看吧

[wqvbugvv]

<div id="baseinfo" class="title"> <img src="/images/groupUnexpanded.gif" /> <b>基本信息</b><span style="font-size:80%">（请尽量填写完整）</span></div>
<div id="baseinfo_child">
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td class="tdleft" style="width:10%">姓名*</td>
    <td  style="width:24%"><input type="text" /></td>
    <td class="tdleft" style="width:10%">性别*</td>
    <td  style="width:23%"><input type="radio" name="xb" value="0" checked="checked" />男 <input type="radio" name="xb" value="1" />女</td>
    <td class="tdleft" style="width:10%">出生日期*</td>
    <td  style="width:23%"><input type="text" /></td>
  </tr>
  <tr>
    <td class="tdleft">国籍*</td>
    <td ><input type="text" /></td>
    <td class="tdleft">籍贯*</td>
    <td ><input name="text6" type="text" /></td>
    <td class="tdleft">民族*</td>
    <td ><select><option>汉</option></select> </td>
  </tr>
  <tr>
    <td class="tdleft">身高</td>
    <td ><input name="text63" type="text" />
      cm</td>
    <td class="tdleft">婚否*</td>
    <td ><input type="radio" name="xb" value="0" checked="checked" />未婚 <input type="radio" name="xb" value="1" />已婚</td>
    <td class="tdleft">身份证号*</td>
    <td ><input name="text64" type="text" /></td>
  </tr>
  <tr>
    <td class="tdleft">高考生源地</td>
    <td ><input name="text67" type="text" /></td>
    <td class="tdleft">户口所在地</td>
    <td ><input name="text614" type="text" /></td>
    <td class="tdleft">在读院校</td>
    <td ><input name="text65" type="text" /></td>
  </tr>
  <tr>
    <td class="tdleft">在读院系</td>
    <td ><input name="text68" type="text" /></td>
    <td class="tdleft">在读专业</td>
    <td ><input name="text615" type="text" /></td>
    <td class="tdleft">在读学位</td>
    <td ><input name="text66" type="text" /></td>
  </tr>
  <tr>
    <td class="tdleft">培养类型</td>
    <td ><input name="text69" type="text" /></td>
    <td class="tdleft">毕业时间*</td>
    <td colspan="3" ><select><option>2011</option></select>年<select><option>1</option></select>月</td>
  </tr>
  <tr>
    <td class="tdleft">移动电话</td>
    <td ><input name="text610" type="text" /></td>
    <td class="tdleft">宿舍电话*</td>
    <td colspan="3" ><input name="text617" type="text" /></td>
  </tr>
  <tr>
    <td class="tdleft">Email</td>
    <td ><input name="text611" type="text" /></td>
    <td class="tdleft">QQ</td>
    <td ><input name="text618" type="text" /></td>
    <td class="tdleft">MSN</td>
    <td ><input name="text619" type="text" /></td>
  </tr>
</table>
<br/>
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td class="tdleft" style="width:10%">第一外语*</td>
    <td  style="width:24%"><input name="text612" type="text" /></td>
    <td class="tdleft" style="width:10%">水平*</td>
    <td  style="width:23%"><select name="select">
      <option>2011</option>
    </select>
    </td>
    <td class="tdleft" style="width:10%">口语</td>
    <td  style="width:23%"><select name="select3">
      <option>2011</option>
    </select>
    </td>
  </tr>
  <tr>
    <td class="tdleft">第二外语</td>
    <td ><input name="text613" type="text" /></td>
    <td class="tdleft">水平</td>
    <td ><select name="select2">
      <option>2011</option>
    </select>
    </td>
    <td class="tdleft">口语</td>
    <td ><select name="select4">
      <option>2011</option>
    </select>
    </td>
  </tr>
</table>
<br/>
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td class="tdleft">自我评价</td>
  </tr>
  <tr>
    <td><textarea name="textarea5" cols="100" rows="5" ></textarea></td>
  </tr>
  <tr>
    <td class="tdleft">既往病史</td>
  </tr>
  <tr>
    <td><textarea name="textarea6" cols="100" rows="5" ></textarea></td>
  </tr>
</table>
</div>
<div id="eduinfo" class="title"> <img src="/images/groupUnexpanded.gif" /> <b>教育经历</b><span style="font-size:80%">（请从最高学历填写至本科）</span></div>
<div id="eduinfo_child">
<div id="jyjl">
  <table width="100%" border="0" cellpadding="2" cellspacing="2">
    <tr>
      <td class="tdleft" style="width:10%">时间*</td>
      <td colspan="5">从<select name="select">
      <option>2011</option>
    </select>年<select><option>1</option></select>月到
    <select name="select5">
      <option>2011</option>
    </select>
    年<select><option>1</option></select>月</td>
    </tr>
    <tr>
      <td class="tdleft" style="width:10%">院校*</td>
      <td  style="width:24%"><input name="text6122" type="text" /></td>
      <td class="tdleft" style="width:10%">专业*</td>
      <td  style="width:23%"><input name="text6122" type="text" /></td>
      <td class="tdleft" style="width:10%">学位*</td>
      <td  style="width:23%"><select name="select">
      <option>学士</option>
    </select></td>
    </tr>
  </table>
</div>
<div style="line-height:20px;height:20px;text-align:right;margin-bottom:10px">
  <input type="button" value="新增">
</div>
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="2" class="tdleft">在校期间表现</td>
  </tr>
  <tr>
    <td colspan="2" class="tdleft">专业描述</td>
  </tr>
  <tr>
    <td colspan="2"><textarea name="textarea4" cols="100" rows="5" ></textarea></td>
  </tr>
  <tr>
    <td style="width:50%">介绍你的专业研究方向，毕业设计等情况</td>
    <td style="width:50%">允许输入500字（已输入0字）</td>
  </tr>
  <tr>
    <td colspan="2" class="tdleft">社会实践</td>
  </tr>
  <tr>
    <td colspan="2"><textarea name="textarea3" cols="100" rows="5"></textarea></td>
  </tr>
  <tr>
    <td style="width:50%">请填写学生社团活动、社会调查、志愿服务、实习等学生实践活动</td>
    <td style="width:50%">允许输入500字（已输入0字）</td>
  </tr>
  <tr>
    <td colspan="2" class="tdleft">受过何处奖惩*</td>
  </tr>
  <tr>
    <td colspan="2"><textarea name="textarea2" cols="100" rows="5" ></textarea></td>
  </tr>
  <tr>
    <td style="width:50%">请如实填写：何时何地因何原因获得奖励（奖学金、荣誉、证书等）或处分，没有请填写‘无’</td>
    <td style="width:50%">允许输入500字（已输入0字）</td>
  </tr>
</table>
</div>
...以下基本上都跟上面类似

[liangws]

$("#" + titleid + "_child").toggle("slow", function() {
alert($("#" + titleid + ":hidden img").length)
$("#" + titleid + ":hidden img").attr("src", "2.bmp");
$("#" + titleid + ":visible img").attr("src", "1.bmp");
});

测试下，每次都是打印0.。。

[yjxf8285]

楼主再看一下toggle的用法说明吧，我专门为了你写了一个例子

<!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>toggle方法练习</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(function(){
$('.toggle').toggle(function(){
$(this).css("color","red");//第一次点击的时候
},function(){
$(this).css("color","blue");//第二次点击的时候
}
);
});
</script>
</head>
<body>
<div class="toggle">文字变色</div>
</body>
</html>

[风一样的大叔]

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
</body>
</html>

例子

[yjxf8285]

[Quote=引用 5 楼 qiujialongjjj 的回复:]

JScript code
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").toggle(function(){
$("body……
[/Quote]
你这算盗版不 呵呵 我都写过例子了 你还发

[liangws]

楼主是想要这个效果吧？
$("#" + titleid + "_child").toggle("slow", function() {
var $this = $(this);
$("#" + titleid + " img").attr("src", $this.is(":hidden") ? "/images/groupUnexpanded.gif" : "/images/groupExpanded.gif");
});

[liangws]

点击图片隐藏下面菜单，菜单隐藏时，切换图片？

[小真子]

这个效果，你看行不行？http://www.qiuzhiquan.com/portal.php?mod=topic&topicid=1

[wqvbugvv]

[Quote=引用 7 楼 liangws 的回复:]
楼主是想要这个效果吧？
$("#" + titleid + "_child").toggle("slow", function() {
var $this = $(this);
$("#" + titleid + " img").attr("src", $this.is(":hidden") ? "/images/groupUnexpanded.gif" : "/images/g……
[/Quote]
－－
谢谢！这样是可以了。不过不知道为什么上面那样就不行了？

[liangws]

[Quote=引用 10 楼 wqvbugvv 的回复:]

引用 7 楼 liangws 的回复:
楼主是想要这个效果吧？
$("#" + titleid + "_child").toggle("slow", function() {
var $this = $(this);
$("#" + titleid + " img").attr("src", $this.is(":hidden") ? "/images/groupUnexpanded.g……
[/Quote]

$("#" + titleid + ":hidden img").attr("src", "/images/groupUnexpanded.gif");
$("#" + titleid + ":visible img").attr("src", "/images/groupExpanded.gif");
你的图片都没有隐藏。。$("#" + titleid + ":hidden img").attr("src", "/images/groupUnexpanded.gif");这句肯定执行不了