Div Span внутри Div Span .... DivSpanception

Question

Я пытаюсь создать DIV & Span внутри 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 == 'нет') || (status7 == 'нет')) {Скрыть (ID1); скрыть (id2); скрыть (id3); скрыть (id4); скрыть (ID5); скрыть (ID6), скрыть (ИД7); вернуть; } }

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 является блочным элементом. Блочные элементы могут содержать встроенные элементы или другие блоки, но не наоборот.

Если я правильно понимаю ваш вопрос, вы хотите переключить ВСЕ пролеты или ВСЕ деления. Одним из простых способов сделать это было бы получить все промежутки или деления, а затем перебрать каждый из них и добавить display none или block в зависимости от того, есть ли у них display: 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.

Спасибо за помощь!