ディビジョン・スパン内のディバ・スパン.... DivSpanception

Question

DIVを作成しようとしています&ディープ内のスパン&スパン。

誰かが「すべて表示」または「すべてを非表示」をクリックし、すべてのスパンを適切に開いて閉じることができる表示/非表示コードを作成しました。または、ユーザーが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; 

} 場合（（STATUS1 = 'なし'）||（STATUS2 = 'なし'）！！| |（status6 == '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> 

現在、Inner DIV/SPANを作成していますが、ツールバーをクリックして開くことができますが、「すべて表示」/「すべてを隠す」をクリックすると正しく動作しません。

どうすれば解決できますか？

Answer 1

まず、の中に<div>をネストするのは有効なHTMLではありません。スパンはインライン要素で、divはブロック要素です。ブロック要素は、インライン要素または他のブロックを含むことができますが、その逆はできません。

あなたの質問が正しく理解されている場合は、すべてのスパンまたはすべてのdivを切り替える必要があります。 これを行う簡単な方法の1つは、すべてのスパンまたは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にスパンを変更しました。

ありがとうございました！