更改显示隐藏脚本，使其在 IE 上运行

Question

我正在使用此脚本来显示/隐藏页面上的菜单部分，但它似乎不适用于 Internet Explorer。如何更改代码以便它也可以在 IE 上运行？

我认为这可以在 Jquery 中使用切换功能更轻松地完成，但我想保持相同的结构，任何人都可以帮助我吗？

visibleDiv1 = "";
visibleDiv2 = "";
visibleDiv3 = "";
visibleDiv4 = "";

function showHide1(elementid1){
  if (document.getElementById(elementid1).style.display == 'none'){
    document.getElementById(elementid1).style.display = '';
    if(visibleDiv1 != ""){
      if(visibleDiv1 != elementid1){
        document.getElementById(visibleDiv1).style.display = 'none';
      }
    }
    visibleDiv1 = elementid1;
  } else {
    document.getElementById(elementid1).style.display = 'none';

  }
}

function showHide2(elementid2){
  if (document.getElementById(elementid2).style.display == 'none'){
    document.getElementById(elementid2).style.display = '';
    if(visibleDiv2 != ""){
      if(visibleDiv2 != elementid2){
        document.getElementById(visibleDiv2).style.display = 'none';
      }
    }
    visibleDiv2 = elementid2;
  } else {
    document.getElementById(elementid2).style.display = 'none';
  }
}

function showHide3(elementid3){
  if (document.getElementById(elementid3).style.display == 'none'){
    document.getElementById(elementid3).style.display = '';
    if(visibleDiv3 != ""){
      if(visibleDiv3 != elementid3){
        document.getElementById(visibleDiv3).style.display = 'none';
      }
    }
visibleDiv3 = elementid3;
  } else {
    document.getElementById(elementid3).style.display = 'none';
  }
}

function showHide4(elementid4){
  if (document.getElementById(elementid4).style.display == 'none'){
    document.getElementById(elementid4).style.display = '';
    if(visibleDiv4 != ""){
      if(visibleDiv4 != elementid4){
        document.getElementById(visibleDiv4).style.display = 'none';
      }
    }
    visibleDiv4 = elementid4;
  } else {
    document.getElementById(elementid4).style.display = 'none';
  }
}

Answer 1

这确实是编码很差，您需要重新使用您的代码，并简单地调用您想要隐藏的元素。您已经为每个元素创建了函数。

您应该完成这样的主要函数：

function showHide(elementid, visibleDiv){
  if (document.getElementById(elementid).style.display == 'none'){
    document.getElementById(elementid).style.display = '';
    if(visibleDiv != ""){
      if(visibleDiv != elementid1){
        document.getElementById(visibleDiv).style.display = 'none';
      }
    }
    visibleDiv = elementid;
  } else {
    document.getElementById(elementid).style.display = 'none';

  }
}

然后简单地调用该函数执行类似的操作：

showHide('id-of-your-element', 'visible-div-etc');

我真的建议使用 jQuery，因为这个简单隐藏的东西开箱即用得到更好的支持，并且你可以专注于其他事情。使用 toggle() 或简单的 .hide() / .show() 函数。