Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z menu js
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Wasiquard
Problem ze strony testowej LO:
http://lo.tp.boo.pl/
Menu - gdy klikam w menu na dział "Dyrekcja", "Absolwenci" i "Dla uczniów" powinno się rozsunąć i pokazać inne pozycje. No i pokazuje, ale... nie swoje. Przyznam się, że js w ogóle nie znam, ale znam php i pomogło mi to w podrasowaniu scriptu, który znalazłem w programie AAScripter. Domyślnie script działał dobrze, ale powtarzały się identyfikatory, co jest niezgodne z xhtml (i chyba ogólnie z html'em). Jak zrobić by działało to dobrze? Może ma ktoś kod innego, podobnego menu.

JS:

Kod
function change(){
  var nr = "0";
  if(!document.all)
    return
  do {
    nr++
  } while(event.srcElement.id=="header_" + nr){
    var nested = document.getElementById("header_" + nr + "_")
    if (nested.style.display=="none") {
      nested.style.display=''
    } else {
      nested.style.display="none"
    }
  }
}

document.onclick = change


HTML:

  1. <div id="menu">
  2. <ul>
  3. <li class="top">Serwis</li>
  4. <li><a href="#" class="on"><span>Aktualności</span></a></li>
  5. <li><a href="#"><span>Historia</span></a></li>
  6. <li><a href="javascript:void(null)"><span id="header_1">Dyrekcja</span></a></li>
  7. <ul id="header_1_" style="display: none;">
  8. <li><a href="#"><span>Nauczyciele</span></a></li>
  9. <li><a href="#"><span>Dyrekcja</span></a></li>
  10. <li><a href="#"><span>Samorząd</span></a></li>
  11. <li><a href="#"><span>Rada Rodziców</span></a></li>
  12. </ul>
  13. <li><a href="javascript:void(null)"><span id="header_2">Absolwenci</span></a></li>
  14. <ul id="header_2_" style="display: none;">
  15. <li><a href="#"><span>Zjazd absolwentów</span></a></li>
  16. <li><a href="#"><span>Stowarzyszenie absolwentów</span></a></li>
  17. <li><a href="#"><span>Księga absolwentów</span></a></li>
  18. <li><a href="#"><span>Lista absolwentów</span></a></li>
  19. </ul>
  20. <li><a href="#"><span>Galeria zdjęć</span></a></li>
  21. <li><a href="javascript:void(null)"><span id="header_3">Dla uczniów</span></a></li>
  22. <ul id="header_3_" style="display: none;">
  23. <li><a href="#"><span>Zajęcia dodatkowe</span></a></li>
  24. <li><a href="#"><span>Zastępwstwa</span></a></li>
  25. <li><a href="#"><span>Pobieranie</span></a></li>
  26. <li><a href="#"><span>Bramka e-mail</span></a></li>
  27. </ul>
  28. <li><a href="#"><span>Mapa serwisu</span></a></li>
  29. <li class="top">Statystyki</li>
  30. <li class="empty"><b>Odwiedzin:</b> 32432</li>
  31. <li class="empty"><b>On-line:</b> 4</li>
  32. <li class="empty" id="clock"></li>
  33. </ul>
  34. </div>
revyag
Od razu widać, że kod jest IE only snitch.gif
A można to zrobić prościej.
Kod
function change(item){
    if(document.getElementById(item.id+"_").style.display=="none") {
        document.getElementById(item.id+"_").style.display=""
    } else {
        document.getElementById(item.id+"_").style.display="none"
    }
}

  1. <div id="menu">
  2. <ul>
  3. <li class="top">Serwis</li>
  4. <li><a href="#" class="on"><span>Aktualności</span></a></li>
  5. <li><a href="#"><span>Historia</span></a></li>
  6. <li><a href="javascript:void(null)"><span id="header_1" onclick="change(this)">Dyrekcja</span></a></li>
  7. <ul id="header_1_" style="display: none;">
  8. <li><a href="#"><span>Nauczyciele</span></a></li>
  9. <li><a href="#"><span>Dyrekcja</span></a></li>
  10. <li><a href="#"><span>Samorząd</span></a></li>
  11. <li><a href="#"><span>Rada Rodziców</span></a></li>
  12. </ul>
  13. <li><a href="javascript:void(null)"><span id="header_2" onclick="change(this)">Absolwenci</span></a></li>
  14. <ul id="header_2_" style="display: none;">
  15. <li><a href="#"><span>Zjazd absolwentów</span></a></li>
  16. <li><a href="#"><span>Stowarzyszenie absolwentów</span></a></li>
  17. <li><a href="#"><span>Księga absolwentów</span></a></li>
  18. <li><a href="#"><span>Lista absolwentów</span></a></li>
  19. </ul>
  20. <li><a href="#"><span>Galeria zdjęć</span></a></li>
  21. <li><a href="javascript:void(null)"><span id="header_3" onclick="change(this)">Dla uczniów</span></a></li>
  22. <ul id="header_3_" style="display: none;">
  23. <li><a href="#"><span>Zajęcia dodatkowe</span></a></li>
  24. <li><a href="#"><span>Zastępwstwa</span></a></li>
  25. <li><a href="#"><span>Pobieranie</span></a></li>
  26. <li><a href="#"><span>Bramka e-mail</span></a></li>
  27. </ul>
  28. <li><a href="#"><span>Mapa serwisu</span></a></li>
  29. <li class="top">Statystyki</li>
  30. <li class="empty"><b>Odwiedzin:</b> 32432</li>
  31. <li class="empty"><b>On-line:</b> 4</li>
  32. <li class="empty" id="clock"></li>
  33. </ul>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.