Div Span内部的Div Span…DivSpanception

Question

我正在尝试在DIV和跨度中创建DIV和跨度。

我创建了显示/隐藏代码，该代码将允许某人单击“全部显示”或“全部隐藏”，所有Span都会正确打开和关闭。 或者，用户可以单独单击DIV，然后打开该部分。

<script type="text/javascript">



function displayMap() {
                document.getElementById('map_canvas').style.display="block";
                initialize();
            }



function showhide(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "none";
} else {
  obj.style.display = "";
}

}}

function hide(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "none") {
  obj.style.display = "none";
} else {
  obj.style.display = "none";
}

}}

function hideall(id1,id2,id3,id4,id5,id6,id7) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display; 
  var status5 = document.getElementById(id5).style.display; 
  var status6 = document.getElementById(id6).style.display; 
  var status7 = document.getElementById(id7).style.display; 
      if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none') || (status5 == 'none') || (status6 == 'none') || (status7 == 'none')) {
hide(id1);  hide(id2); hide(id3); hide(id4); hide(id5); hide(id6);hide(id7);     return;

} if（（status1！='none'）||（status2！='none'）||（status3！='none'）||（status4！='none'）||（status5 =='none' ）||（status6 =='none'）||（status7 =='none'））{hide（id1）; hide（id2）; hide（id3）; hide（id4）; hide（id5）; hide（id6）; hide（id7）; 返回; }}

function show(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "";
} else {
  obj.style.display = "";
}

}}

function showall(id1,id2,id3, id4, id5, id6, id7) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display;
  var status5 = document.getElementById(id5).style.display;
  var status6 = document.getElementById(id6).style.display;
  var status7 = document.getElementById(id7).style.display; 
  if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none') || (status5 = 'none') || (status6 = 'none') || (status7 == 'none')) {
show(id1);  show(id2); show(id3); show(id4); show(id5); show(id6);show(id7);      return;
      }
      if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none') || (status5 != 'none') || (status6 != 'none') || (status7 == 'none')) {show(id1);  show(id2); show(id3); show(id4); show(id5); show(id6);show(id7);     return;
  }
    }
    </script>

我目前所拥有的：

<center>
 <div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id5'); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;General Airport Information</strong></font></td><td align=right><font color="white" size="1">Click to Expand/Close</font></td></tr></table></div>

    <span id="id5" style="display: none">    

...HIDDEN TEXT...

    </span>
  </center>
<br>

我想要的是：

<center>
 <div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id6'); displayMap(); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;Airport Maps</strong></font></td><td align=right><font color="white" size="1">Click to Expand/Close</font></td></tr></table></div>

    <span id="id6" style="display: none">    

<center>
 <div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id7'); displayMap(); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;Airport Maps hiddent toolbar</strong></font></td><td align=right><font color="white" size="1">Click to Expand/Close</font></td></tr></table></div>

    <span id="id7" style="display: none">  

...HIDDEN TEXT...

    </span>
  </center>


    </span>
  </center>
    <br>

当前，我已经创建了内部DIV / SPAN，并且可以单击工具栏并将其打开，但是当我单击“全部显示” /“全部隐藏”时，它无法正常工作。

我该如何解决？

Answer 1

首先，在<span>内嵌套<div>无效的HTML。 Span是一个内联元素，而div是一个块元素。 块元素允许包含内联元素或其他块，但反之亦然。

如果我正确理解了您的问题，则希望切换所有跨度或所有div。 一种简单的方法是获取所有的span或div，然后遍历每个span或div并根据它们是否已经具有display：none来添加display none或block。

// tagName would be span or div
function toggleAll (tagName) {  
      // Get all divs or spans 
      var elems = document.getElementsByTagName(tagName);

  // Do this for each element
  for (var i = 0; i < elems.length; i += 1) {
     // If elem has display none, show it!
     if (elems[i].style.display === 'none') {
        elems[i].style.display = 'block';
     } else { // .. else hide them
        elems[i].style.display = 'none';
     }
  }    
}

// Call the function
toggleAll('span');

Answer 2

我解决了 我将跨度更改为Divs。

谢谢您的帮助！