Div跨度内的Div跨度.... DivSpanception

我试图创建一个DIV &跨度内DIV &跨度。Div跨度内的Div跨度.... DivSpanception

我创建了显示/隐藏代码，允许某人点击“全部显示”或“全部隐藏”，所有的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（（状态1 = '无'）||（状态= '无'）！| |（status3！='none'）||（status4！='none'）||（status5 =='none'）||（status6 =='none'）||（status7 =='none'）） {hide（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，并且我可以单击工具栏并打开它，但是当我单击“全部显示”/“全部隐藏”时，它无法正常工作。

我该如何解决这个问题？

来源

2012-03-14 DJ Howarth

为什么要在'showall（）'和'hideall（）'中检索显示状态。只需设置所有显示与否。 – Teemu 2012-03-14 13:29:24

你真的不应该使用

标签，而是尝试分解所有内联样式并使用CSS文件来代替样式和布局。 http://www.w3schools.com/css/ – patad 2012-03-14 13:40:42

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

如果我正确理解你的问题，你想要切换所有跨度或所有div。这样做的一个简单方法是获取所有跨度或div，然后遍历每个跨度或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');

来源

2012-03-14 13:37:34 patad

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

感谢您的帮助！

来源

2012-03-16 03:10:25

Div跨度内的Div跨度.... DivSpanception

回答

相关问题