JavaScript Navigation... Schließen?

  • JavaScript Navigation... Schließen?

    Hab ein kleines Problem mit meiner JS-Navigation... Immer wenn ich auf die Unternemü-Links klicke, klappt mein Menü wieder zu... Es soll aber nur zuklappen, wenn man auf den Hauptpunkt klickt ;) Ich find nur den Fehler nicht...

    Hier ist der Quelltext... Da könnt ihr genau sehen was ich meine :)

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    5. <meta http-equiv="content-script-type" content="text/javascript">
    6. <meta http-equiv="content-style-type" content="text/css">
    7. <title>TeeshopNavi</title>
    9. <style type="text/css" media="screen">
    10. <!--
    11. body
    12. { background: #DFFFD2;
    13. font-size: 0.8em;
    14. font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif, Monotype Corsiva;
    15. overflow: auto;
    16. padding: 10px;
    17. margin: 0px;
    18. }
    20. #menu, #menu ul
    21. {
    22. padding: 0px;
    23. margin: 0px;
    24. }
    26. #menu li
    27. {
    29. list-style-type: none;
    30. cursor: pointer;
    31. line-height: 25px;
    32. text-align: center;
    33. border: 1px solid #666;
    34. background: #99FF99;
    35. display: block;
    36. color: #000;
    37. text-decoration:none;
    38. }
    40. #menu a
    41. {
    42. background: #DFFFD2;
    43. text-decoration: none;
    44. font-weight: normal;
    45. padding-left: 10px;
    46. display: block;
    47. }
    48. //-->
    49. </style>
    51. <script type="text/javascript">
    52. <!--
    53. function hideSub()
    54. {
    55. if (!document.getElementsByTagName)
    56. return;
    58. var mnu = document.getElementById('menu');
    59. var toplis = mnu.getElementsByTagName('li');
    61. for (var it = 0; it < toplis.length; it++)
    62. {
    63. var sublis = toplis[it].getElementsByTagName('li');
    65. for (var is = 0; is < sublis.length; is++)
    66. if (sublis[is].style)
    67. sublis[is].style.display = (toplis[it].className == 'show') ? 'block' : 'none';
    68. }
    69. }
    71. function mShow(Me)
    72. {
    73. if (!Me.getElementsByTagName)
    74. return;
    76. var mylis = Me.getElementsByTagName('li');
    78. if (!mylis)
    79. return;
    81. for (j = 0; j < mylis.length; j++)
    82. mylis[j].style.display = (mylis[j].style.display == 'block') ? 'none' : 'block';
    83. }
    84. //-->
    85. </script>
    87. </head>
    88. <body onload="hideSub();">
    90. <ul id="menu">
    91. <li class="show" onclick="mShow(this);">Home
    92. <ul>
    93. <li><a href="#">Start und son Scheiß halt... :)</a></li>
    94. </ul>
    95. </li>
    97. <li onclick="mShow(this);">Asiatischer Tee
    98. <ul>
    99. <li><a href="#">Tee1</a></li>
    101. <li><a href="#">Tee2</a></li>
    102. <li><a href="#">Tee3</a></li>
    103. </ul>
    104. </li>
    106. <li onclick="mShow(this);">Europäischer Tee
    107. <ul>
    108. <li><a href="#">Tee1</a></li>
    110. <li><a href="#">Tee2</a></li>
    111. <li><a href="#">Tee3</a></li>
    112. </ul>
    113. </li>
    115. <li onclick="mShow(this);">Zubehör
    116. <ul>
    117. <li><a href="#">Freakzeugs</a></li>
    119. <li><a href="#">Teegedöhns</a></li>
    120. <li><a href="#">etc</a></li>
    121. </ul>
    122. </li>
    123. </ul>
    125. </body>
    126. </html>
    Alles anzeigen


    Danke im Vorraus ;)

    MfG

    Marcel

  • hi,

    stehen die links so bei dir im code mit # als href?

    mit #irgendein_id_name springt man normalerweise zu ankern.

    da sich die url bei klick auf einen dieser links verändern sollte (raute wird angehängt)
    sollte sich die seite eigentlich neu laden. und da du ja die funktion hideSubs im body onload stehen hast, werden die subs geschlossen....


    mfg da BendIt
    .:Reden Ist Schweigen und Silber Ist Gold:.

    real programmers don't comment their code: if it was hard to write, it should be hard to read!

  • Hallo,

    würde sagen, das ist mehr ein HTML-Problem, da Du Deine Listen verschachtelt hast:

    Quellcode

    1. <li onclick="mShow(this);">Asiatischer Tee
    2. <ul>
    3. <li><a href="#">Tee1</a></li>
    5. <li><a href="#">Tee2</a></li>
    6. <li><a href="#">Tee3</a></li>
    7. </ul>
    8. </li>


    Der Click Event liegt ja auf dem gesamten äußeren <li>, also auch z.B. auf "Tee1".

    Probiers mal so:

    Quellcode

    1. <li><span onclick="mShow(this)" style="cursor: pointer">Asiatischer Tee</span>
    2. <ul>
    3. <li><a href="#">Tee1</a></li>
    4. <li><a href="#">Tee2</a></li>
    5. <li><a href="#">Tee3</a></li>
    6. </ul>
    7. </li>


    70abc
    We raise hopes, here ... until they're old enough to fend for themselves.
    - Mike Callahan

  • Das Problem in deinem Script ist, dass das ganze <li> Element klickbar ist und das Untermenü Teil dieses Elements ist.

    Quellcode

    1. <li onclick="mShow(this);">Teil von LI
    2. <ul>
    3. <li>Teil von LI</li>
    4. <li>Teil von LI</li>
    5. </ul>
    6. </li>


    So sollte es gehen

    Quellcode

    1. <li><a href="#" onclick="mShow(this);">Teil von LI</a>
    2. <ul>
    3. <li>Teil von LI</li>
    4. <li>Teil von LI</li>
    5. </ul>
    6. </li>


    Damit das aussehen gleich bleibt, kannst du das <a> mit CSS gestalten
    z.B. display:block;width:100%;

  • Also bei beiden varianten schließt er aber die Hauptmenüpunkte nicht mehr, wenn ich sie anklicke... Sie sollen ja noch schließbar sein. Mich nervts halt nur, dass wenn man auf nem Untermenüpunkt geklickt hat sich auch der Hauptpunkt wieder zuklappte.. Das ist auf dauer Nervig wenn man durch die Warenkörbe navigieren will ;)

  • "One" schrieb:

    Also bei beiden varianten schließt er aber die Hauptmenüpunkte nicht mehr, wenn ich sie anklicke... Sie sollen ja noch schließbar sein. Mich nervts halt nur, dass wenn man auf nem Untermenüpunkt geklickt hat sich auch der Hauptpunkt wieder zuklappte.. Das ist auf dauer Nervig wenn man durch die Warenkörbe navigieren will ;)


    Mh, ja , klar, weil "this" jetzt nicht mehr das "<li>" Element ist...

    Quellcode

    1. <li><span onclick="mShow(this.parent)" style="cursor: pointer">Asiatischer Tee</span>
    2. <ul>
    3. <li><a href="#">Tee1</a></li>
    4. <li><a href="#">Tee2</a></li>
    5. <li><a href="#">Tee3</a></li>
    6. </ul>
    7. </li>


    Keine Ahnung ob "this.parent" wirklich funktioniert, falls nicht, würde ich Ids vergeben:

    Quellcode

    1. <li id="linkGroup2"><span onclick="mShow(document.getElementById('linkGroup2'))" style="cursor: pointer">Asiatischer Tee</span>
    2. <ul>
    3. <li><a href="#">Tee1</a></li>
    4. <li><a href="#">Tee2</a></li>
    5. <li><a href="#">Tee3</a></li>
    6. </ul>
    7. </li>


    Wäre halt nicht so elegant, weil Du die Id "linkGroup2" für jede LinkGruppe anpassen müsstest...

    70abc
    We raise hopes, here ... until they're old enough to fend for themselves.
    - Mike Callahan