改变showhide脚本,使其隐藏子级别

时间:2011-11-01 16:35:02

标签: javascript menu hide accordion show

我正在使用我已更改的showhide脚本,以便为菜单的不同级别启用它。目前我所拥有的是:

<script type="text/javascript">
visibleDiv1 = "";
function showHide1(elementid1,qstring){
  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';
  }
}

visibleDiv2 = "";
function showHide2(elementid2,qstring){
  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';
  }
}

visibleDiv3 = "";
function showHide3(elementid3,qstring){
  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';
  }
}

visibleDiv4 = "";
function showHide4(elementid4,qstring){
  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';
  }
}
</script>

基本上我想要做的是当我点击与该功能相关的按钮时,让ShowHide1也隐藏visibleDiv2,3,4。 ShowHide2隐藏3,4和ShowHide3隐藏4.因为我在每个div中有页面内容,当父div打开时我不想显示。

任何人都可以帮我一把吗?

谢谢!

1 个答案:

答案 0 :(得分:1)

是的,我可以帮忙试试这个

<input type="button" value="one" id="show_1" onclick="hideShow(this)"> 

注意每个按钮id's例如需要在末尾有一个数字

show _ 1

show _ 2 .....

 var arr_divids = ['div_1','div_2','div_3','div_4']; // ids for each of the content to be shown in 

 function hideShow(oWhich){
   for (var i =1; i < arr_divids.length+1; i++) {
     document.getElementById(arr_divids[i-1]).style.display = (i == (oWhich.id).slice(-1)) ? "block" : "none";
    }
  }
相关问题