Javascript 切换“全部展开”和“全部折叠”的图像

我试图交换图像的折叠所有和扩大所有点击，但我真的没有得到它请任何人能帮我。。。提前谢谢

下面是示例的链接 除了expan all COLLASE all按钮外，一切都正常，只要我们点击它。 它应该交换图像

请帮帮我

这是css

body {
            font: 10pt Arial, Helvetica, Sans-serif;
        }
        a {
            text-decoration: none;
        }
        #example1,
        #example2,
        #example3,
        #example4,
        #example5 {
            float: left;
        }
        .expand_all{
            cursor: pointer;
        }
        .collapse_all {
            cursor: pointer;
        }
        .example_menu {
            font-size: 90%;
            list-style: none;
            margin: 0;
            padding: 0;
            vertical-align: top;
            width: 624px;
        }
        .example_menu ul {
            display: none;
            list-style: none;

            padding: 0;
        }
        #menu1,
        #menu2,
        #menu3,
        #menu4,
        #menu5 {
            margin: 0;
        }
        #menu1 li,
        #menu2 li,
        #menu3 li,
        #menu4 li,
        #menu5 li,
        .example_menu li {
            background-image: none;
            margin: 0;
            padding-bottom: 1px;
        }
        .example_menu ul ul {
            display: block;
        }
        .example_menu ul ul li a {
            padding-left: 20px;
            width: 109px;
        }
        .example_menu a {
            color: #000;
            cursor: pointer;
            display: block;
            font-weight: bold;
            margin-left: 0;
            padding: 10px 2px 2px 17px;
width: 605px;
height: 24px;
        }
        .example_menu a.expanded {
            background:  #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%;
        }
        .example_menu a.collapsed {
            background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%;
        }
        .example_menu a:hover {
            text-decoration: none;
        }
        .example_menu ul a {
            background: #e8e8e8;
            border-top: 2px solid #fff;
            color: #000;
            display: block;
            font-weight: normal;
            padding: 2px 2px 2px 10px;
            width: 119px;
        }
        .example_menu ul a:link {
            font-weight: normal;
        }
        .example_menu ul a:hover {
            background : #f5f5f5;
            text-decoration: underline;
        }
        .example_menu li.active a {
            background: #fff;
        }
        .example_menu li.active li a {
            background: #e8e8e8;
        }
        #menu1 li.footer,
        #menu2 li.footer,
        #menu3 li.footer,
        #menu4 li.footer,
        #menu5 li.footer,
        .example_menu .footer {
            background: transparent url('images/footer.jpg') no-repeat 0 0;
            border-top: 2px solid #fff;
            height: 9px;
            line-height: 15px;
            margin: 0 0 10px 0;
            width: 131px;
        }
        .example_menu .footer span {
            display: none;
        }




        /* nadeem css */

        .newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;}
        .newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;}
        .newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;}


}

这是js

$(document).ready(function() {
            setTimeout(function() {
                // Slide
                $('#menu1 > li > a.expanded + ul').slideToggle('medium');
                $('#menu1 > li > a').click(function() {
                    $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
                });
                $('#example1 .expand_all').click(function() {
                    $('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
                });
                $('#example1 .collapse_all').click(function() {
                    $('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
                });

            }, 250);
        });

这是html

<div id="example1">

        <div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div>
        <ul id="menu1" class="example_menu">
            <li><a class="expanded">Section A</a>
        <ul class="newstyles">
            <li>Link A-A</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-B</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-C</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-D</li>
        </ul>
        </li>

            <li><a class="expanded">Section B</a>
        <ul class="newstyles">
            <li>Link A-A</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-B</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-C</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-D</li>
            </ul>
        </li>

            <li><a class="expanded">Section C</a>
        <ul class="newstyles">
            <li>Link A-A</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-B</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-C</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-D</li>
            </ul>
        </li>

        </ul>
    </div>

A节

链接A-A
链接A-B
链接A-C
链接A-D


B节

链接A-A
链接A-B
链接A-C
链接A-D


C节

链接A-A
链接A-B
链接A-C
链接A-D

猜测是顶部的两幅图像，您可以这样做：

<div>
  <a class="expand_all" style="display: none;" onclick="$('.expand_all').hide();$('.collapse_all').show()">
   <img class="img-swap" src="images/toggle-buttons_01.png">
  </a>
  <a class="collapse_all" onclick="$('.expand_all').show();$('.collapse_all').hide()" style="display: inline;">
   <img alt="" src="images/toggle-buttons_02.png">
   </a>
</div>

---

只是隐藏不相关的图片…但不是真正交换图片。

有什么问题，因为它对我来说非常适合？你使用的是什么浏览器？它在Chrome 17中运行良好。在Firefox 10和IE 9中运行良好。但是，如果你在我提供的两张图片的链接中看到图片，点击图片就会翻转过来谢谢。。。。但它的作用就像一个按钮。。。。应该有两个不同的按钮好的，你能说得更具体一点吗？看来我不完全明白你的意思。