可扩展列表-更改展开时显示的图像\关闭

Question

下面我使用ToggleList javascript函数提供了一系列可扩展的下拉选项卡。当选项卡关闭时，我想显示expand.png，当它打开时，我想显示close.png。现在，任何帮助都将不胜感激。

下面的代码展开\最小化下拉选项卡，但不切换png文件。

完整javascript + html:

     <script type="text/javascript">

            function ToggleList(IDS) {
              HideRange('ulist','div',IDS);  // not required unless using 'HideRange()' below

              var CState = document.getElementById(IDS);
              if (CState.style.display != "block") { CState.style.display = "block";      }
                                              else { CState.style.display = "none";   }
              // get a reference to the image contained in the <a> that was just clicked
              var img = this.getElementsByTagName('img')[0];
              // switch the graphic, if it's expand set it to collapse, otherwise expand
              img.src = img.src == "expand.png" ? "minimize.png" : "expand.png";
            }

            function HideRange(sect,elTag,IDS) {
                  var ContentObj = document.getElementById(sect);
                  var AllContentDivs = ContentObj.getElementsByTagName(elTag);

                }


                </script>


                <ul id="ulist">
                <li><a href="#expand" onclick="ToggleList('expand0')"><p><img src="expand.png"/> Subject</p></a></li>
                <div id="expand0" class="divInfo">Text</div>

                <li><a href="#expand" onclick="ToggleList('expand1')"><p><img src="expand.png"/> Subject</p></a></li>
                <div id="expand1" class="divInfo">Text</div>

                <li><a href="#expand" onclick="ToggleList('expand3')"><p><img src="expand.png"/> Subject</p></a></li>
                <div id="expand3" class="divInfo">Text</div>
                </ul>

Answer 1

以下是实现该功能的简单方法--代码中的注释

    function ToggleList(IDS) {
      HideRange('ulist','div',IDS);  // not required unless using 'HideRange()' below
      var CState = document.getElementById(IDS);
      if (CState.style.display != "block") { CState.style.display = "block";      }
                                      else { CState.style.display = "none";   }
      // get a reference to the image contained in the <a> that was just clicked
      var img = this.getElementsByTagName('img')[0];
      // switch the graphic, if it's expand set it to collapse, otherwise expand
      img.src = img.src == "img/expand.png" ? "img/collapse.png" : "img/expand.png";
    }