Question

我试图创建一个DIV＆amp;跨越DIV＆amp;跨度。

我创建了显示/隐藏代码，允许有人点击“全部显示”或“全部隐藏”，所有Spans都可以正常打开和关闭。或者用户可以单独点击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'）） {隐藏（ID1）;隐藏（ID2）;隐藏（ID3）;隐藏（ID4）;隐藏（ID5）;隐藏（ID6）;隐藏（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

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

如果我理解你的问题，你想要切换所有跨度或所有div。一个简单的方法是获取所有跨度或div，然后循环遍历每个跨度和div并添加display none或block，具体取决于它们是否已显示：none。

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

我解决了。我将Spans改为Divs。

感谢您的帮助！

Div Div内的Div Span ...... DivSpanception

2 个答案: