JavaScript Accordion 菜单适用于 IE，不适用于 Chrome 或 Firefox

Question

以下代码在 IE 中运行良好，但在 Chrome 或 Firefox 中不起作用。

在 Chrome 中，只需在 URL 末尾附加 # 并闪烁屏幕。就好像它正在调用该网址一样。我知道它是一个较旧的脚本，它完全符合我在 ie 中的要求。 任何帮助将不胜感激。

 <script type="text/javascript">

function expandCollapse(elem, changeImage) {
 if (document.getElementById) {
ecBlock = document.getElementById(elem);
if (ecBlock != undefined && ecBlock != null) {
  if (changeImage) {
    //gets the image associated
    elemImage = document.getElementById(elem + "Image");
  }
  //make sure elemImage is good
  if (!changeImage || (elemImage != undefined && elemImage != null)) {
    if (ecBlock.currentStyle.display == "none" || ecBlock.currentStyle.display == null || ecBlock.currentStyle.display == "") {
      //shows the info.
      ecBlock.style.display = "block";
      if (changeImage) {
        //Just got in expanded mode. Thus, change image to "collapse"
        elemImage.src = "images/up.png";
      }
    }
    else if (ecBlock.currentStyle.display == "block") {
      //hide info
      ecBlock.style.display = "none";
      if (changeImage) {
        //Just got in collapsed mode. Thus, change image to "expand"
        elemImage.src = "images/down.png";
      }
    }
    else {
      //catch any weird circumstances.
      ecBlock.style.display = "block";
      if (changeImage) {
        elemImage.src = "images/up.png";
      }
    }
  }
  //end check elemImage
}
//end check ecBlock
  }
//end getElemById
//end expandCollapse function
</script>    

我创建的其中一行是

<h4>
<tr>
<td valign="top">
    <a href="#" onclick="javascript:expandCollapse('infoBlockID3', true); return false;"><img src="images/down.png" id="infoBlockID3Image" border="0" class="actionIcon" alt="How long will it take to hear fom an adjuster?" align=absmiddle>How long will it take to hear fom an adjuster?</a>
  </td>
  <td valign="top">
    <span id="moreInfoContainer"></span>
    <noscript><ID id="moreInformation">How long will it take to hear fom an adjuster?           </ID></noscript>
  </td>
</tr>
</table>
</h4>

<div id="infoBlockID3" style="display: none" class='BodyText'>
  <p>2nd Line goes here
<ul>
  <li>Another Line</li>
  <li>Last Line</li>
</ul>
</p>
</div>

非常感谢您的帮助。如果我能完成这两项工作，这将对我有很大帮助。

Answer 1

Chrome、Firefox 或除 Internet Explorer 或 Opera 之外的任何其他浏览器都不支持元素的 currentStyle 属性。 为了解决您的问题，只需将 'currentStyle' 替换为 'style':

if (ecBlock.currentStyle.display == "none" || ecBlock.currentStyle.display == null || ecBlock.currentStyle.display == "") {

应该是

if (ecBlock.style.display == "none" || ecBlock.style.display == null || ecBlock.style.display == "") {

和

else if (ecBlock.currentStyle.display == "block") {

应该是

else if (ecBlock.style.display == "block") {