更改show-hide脚本以使其在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 tho，因为这个简单的隐藏东西开箱即用会得到更好的支持，你可以专注于其他事情。使用toggle()或普通的.hide() / .show()函数。