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";
    }

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

1 个答案: