toggle-funktion, javascript

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • toggle-funktion, javascript

    Hi,

    ich habe nun die Thematik aus diesem Thread mit JavaScript bearbeitet. Ich habe also eine toggle-Funktion und den jeweiligen Elementen eine id zugewiesen.
    Jetzt hab ich zwei Probleme:
    1. Ich habe bei allen (per CSS) display:none gesetzt, sodass die unteren Ebenen am Anfang nicht sichtbar sind. Nun muss ich aber 2mal auf die erste Menüebene klicken, damit die toggle-Funktion ausgelöst wird. Kann mir jemand erklären warum das so ist?

    2. Ich würde die unteren Ebenen gerne einrücken, was normalerweise bei der Verschachtelung von Listen auch funktioniert. Allerdings geht das nicht mit der JS-Funktion. Auch hier wäre ich für eine Lösung dankbar.

    hier die relevanten Code-Stellen (auszugsweise)

    Quellcode

    1. function toggle(obj) {
    2. var el = document.getElementById(obj);
    3. if ( el.style.display != 'none' ) {
    4. el.style.display = 'none';
    5. } else {
    6. el.style.display = 'inline';
    7. }
    8. }


    Quellcode

    1. <div id="menu">
    2. <ul>
    3. <li><A HREF="kontakt.html" TARGET="inhalt">Startseite</A></li>
    4. <li><A HREF="person.html" TARGET="inhalt">Zur Person</A></li>
    5. </ul>
    6. <ul>
    7. <li><A HREF="#" onclick="toggle('lehre');">Lehre</A></li>
    8. <ul id="lehre">
    9. <li><a href="lehre.html#vorst_lehre" target="inhalt">Vorstellungen zur Lehre</a></li>
    10. <li><a href="lehre.html#vorst_lehre" target="inhalt">Lehrveranstaltungen im Wintersemester 2007</a></li>
    11. <li><a href="lehre.html#hinw_ws" target="inhalt">Hinweise f&uuml;r das Wintersemester 2007/2008</a></li>
    12. <li><a href="lehre.html#vorst_lehre" target="inhalt">Bisherige Lehrveranstaltungen</a></li>
    13. <li><a href="schriftliche_arbeiten.pdf" target="_blank">Verfassung von schriftlichen Arbeiten (Download)</a></li>
    14. </ul>
    15. </ul>
    16. <ul>
    17. <li><a href="#" onclick="toggle('praktika');">Betreuung von Praktika und Abschlussarbeiten</a></li>
    18. <ul id="praktika">
    19. <li><a href="praktika.html">laufende und abgeschlossene Abschlussarbeiten u.a. zu folgenden Themen</a></li>
    20. <li><a href="praktika.html">Vermittlung von Praktika im Bereich Controlling</a></li>
    21. </ul>
    22. </ul>
    23. <ul>
    24. <li><a href="aufgaben.html" target="inhalt">Aufgaben im Studienbetrieb / weitere Funktionen und Mitgliedschaften</a></li>
    25. </ul>
    26. <ul>
    27. <li><a href="#" onclick="toggle('akademisch');">Akademische T&auml;tigkeiten</a></li>
    28. <ul id="akademisch">
    29. <li><a href="akademisch.html#" target="inhalt">Forschungsinteressen und Forschungsprojekte</a></li>
    30. <li><a href="akademisch.html#" target="inhalt">Forschungsf&ouml;rderung</a></li>
    31. <li><a href="akademisch.html#" target="inhalt">Ausgew&auml;hlte Ver&ouml;ffentlichungen und Vortr&auml;ge</a></li>
    32. <li><a href="akademisch.html#" target="inhalt">Mitgliedschaften/Arbeitskreise</a></li>
    33. </ul>
    34. </ul>
    35. </div>
    Alles anzeigen


    Quellcode

    1. #menu ul, li{
    2. list-style-type:none;
    3. }
    5. #menu #lehre, #praktika, #akademisch {
    6. display:none;
    7. }

  • Wenn du den stil display:none im <head> definierst und nicht direkt ins DOM Objekt schreibst, dann weiß JavaScript davon nichts und es ist im Zweifelsfall "undefined".
    Kannst ja einfach mal einen alert einbauen: alert(el.style.display). Mehr Sinn macht eine andere Bedingung: el.style.display == 'inline'
    Bzw.. das wären wir bei deinem 2ten Problem: ul ist ein Blockelement. Also display:block

    Ansonsten kannst du all das, was mit CSS möglich ist: Siehe de.selfhtml.org/javascript/obj…e.htm#style_eigenschaften