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

回答

相關問題