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


<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）。这时标题的图片也应该跟着变化。
但很奇怪的是，只有第一次有效果。也就是当前是显示点击隐藏的时候图片改变了。以后图片就不改变了。我觉得代码没错啊。哪位帮忙看看！

解决方案 »

  1.   

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

  2.   

    $("#" + 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.。。
      

  3.   

    楼主再看一下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>
      

  4.   

    <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>
    例子
      

  5.   

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

  6.   

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

  7.   


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