JavaScript Accordion Menu适用于IE浏览器而非Chrome或Firefox

时间:2014-08-11 15:22:23

标签: javascript jquery html internet-explorer google-chrome

以下代码在IE中运行良好,但在chrome或firefox中无效。

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

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

非常感谢你的帮助。如果我可以完成这项工作,这将对我有很大的帮助。

1 个答案:

答案 0 :(得分:2)

Chrome或Firefox或Internet Explorer或Opera以外的任何其他浏览器都不支持元素的currentStyle属性。 为了解决您的问题,只需更换“currentStyle&#39;用&#39; style&#39;:

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") {