Javascript "aufklappares" Menu

Dieses Thema im Forum "Web-Know-how für die Homepage" wurde erstellt von Aegis, 24. Februar 2004.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Aegis

    Aegis Kbyte

    Registriert seit:
    16. März 2002
    Beiträge:
    145
    Hi, ich bin nicht gerade ein Javascript kenner aber habe trotzdem mal etwas versucht.

    Mein "aufklappares" Menu funtioniert eigentlich auch ganz gut, doch sobald ich ein zweites Menu (bzw. Eintrag) hinzufügen möchte funktioniert das ganze nicht mehr (siehe Eintrag).
    Ich könnte natürlich jetzt für jedes weitere Menu zwei funtionen mit anderen Namen aber dem genau gelcihen Zweck einfügen.

    Gib es eine möglichkeit das ganze zu vereinfachen, vielleicht 'ghost' als variable zu benutzen???


    Hier mal der Code:

    START CODE

    <html>
    <script type="text/javascript" language="JavaScript1.2">
    var angezeigt = false;

    function versteckt()
    {
    if (angezeigt)
    {
    document.getElementById('ghost').style.display = 'none';
    angezeigt = false;
    }
    else
    {
    document.getElementById('ghost').style.display = 'block';
    angezeigt = true;
    }
    }

    function bildwechsel()
    {
    if (angezeigt == true)
    {
    document.Bild1.src = "minus.gif"
    }
    else
    {
    document.Bild1.src = "plus.gif"
    }
    }

    </script>
    <body>
    <table width="100%" height="100%" border="0">
    <tr><td align="center" valign="middle" width="100%" height="100%">
    <table width="800" height="100%" border="1" bordercolor="#CCCCCC" style="border-style: none;" cellpadding="0" cellspacing="0">
    <tr><td colspan="3" height="150">Test</td></tr>
    <tr><td width="200" valign="top">
    <!-- Start Menu -->
    <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100%" height="23" background="oben.jpg" align="right" valign="middle">
    <a href="#" onclick="versteckt();bildwechsel()"><img src="plus.gif" name="Bild1" border="0"></a>&nbsp;
    </td>
    </tr>
    <tr>
    <td style="display : none" id="ghost">
    <table width="200" height="178" border="1" bordercolor="#CCCCCC" style="border-style: none;" cellpadding="0" cellspacing="0">
    <tr><td valign="top">Test<br>Test2<br>Test3
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- End Menu -->
    </td>
    <td width="400" valign="top">
    <!-- Start Eintrag -->
    <table width="400" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100%" height="23" background="oben.jpg" align="right" valign="middle">
    <a href="#" onclick="versteckt();bildwechsel()"><img src="plus.gif" name="Bild1" border="0"></a>&nbsp;
    </td>
    </tr>
    <tr>
    <td style="display : none" id="ghost">
    <table width="100%" height="178" border="1" bordercolor="#CCCCCC" style="border-style: none;" cellpadding="0" cellspacing="0">
    <tr><td valign="top">Test<br>Test2<br>Test3
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- End Eintrag -->
    </td>
    <td width="200">&nbsp;</td>
    </table>
    </td></tr>
    </table>
    </body></html>

    END CODE
     
  2. Gast

    Gast Guest

    gern geschehen...

    übrings zur info!

    mit

    plus = new Image();plus.src = "plus.gif";

    wir das bild geladen, ohne das angezeigt wird, hat vorteil, bei langsamen verbindungen.
     
  3. Aegis

    Aegis Kbyte

    Registriert seit:
    16. März 2002
    Beiträge:
    145
    Michael_x,

    Warum nicht einfacher?
    Nun beschäftige mich noch nicht lange mit javascript...

    Aber es klappt prima, thx. :D
     
  4. Gast

    Gast Guest

    @it-praktikant
    wo soll da der unterschied sein ?

    ie machts in einer zeile, firebird untereinander

    @aegis

    warum so umstandlich:confused:

    <script>

    plus = new Image();plus.src = "plus.gif";
    minus = new Image();minus.src = "minus.gif";

    var angezeigt = false;

    function versteckt(element,bildnr)
    {
    if (angezeigt)
    {
    document.getElementById(element).style.display = 'none';
    window.document.images[bildnr].src = plus.src;
    angezeigt = false;
    }
    else
    {
    document.getElementById(element).style.display = 'block';
    window.document.images[bildnr].src = minus.src;
    angezeigt = true;
    }
    }
    </script>

    <a href="#" onClick="versteckt('ghost','0')"><img src="plus.gif"></a>


    hinter der variablen ghost steht eine null. diese null ist das erste bild in der html.
    wenn das +- bild nun die dritte ist, so muss anstatt null ZWEI stehen.
     
  5. it-praktikant

    it-praktikant Megabyte

    Registriert seit:
    5. August 2002
    Beiträge:
    1.176
    Naja, dann könnte man so argumentieren: "Wieso sollte der IE CSS3 können, wenn er noch nicht mal CSS2 kann?"
     
  6. Aegis

    Aegis Kbyte

    Registriert seit:
    16. März 2002
    Beiträge:
    145
    Ok, hab es jetzt mal nach der Methode von kalweit gemacht und die funktioniert einwandfrei. THX.

    Jetzt funktioniert aber mein bildwechseln noch nicht, wie kann ich das lösen?

    Neuer CODE:

    <script type="text/javascript" language="JavaScript1.2">
    var angezeigt = false;


    function versteckt(element)
    {
    if (angezeigt)
    {
    document.getElementById(element).style.display = 'none';
    angezeigt = false;
    }
    else
    {
    document.getElementById(element).style.display = 'block';
    angezeigt = true;
    }
    }

    function bildwechsel()
    {
    if (angezeigt == true)
    {
    document.Bild1.src = "minus.gif";
    }
    else
    {
    document.Bild1.src = "plus.gif";
    }
    }
    </script>

    ...

    <a href="#" onclick="versteckt('ghost');bildwechsel()"><img src="plus.gif" name="Bild1" border="0"></a>
    ...
    <td style="display : none" id="ghost">

    ...

    <a href="#" onclick="versteckt('ghost1');bildwechsel()"><img src="plus.gif" name="Bild1" border="0"></a>
    ...
    <td style="display : none" id="ghost1">
     
  7. Gast

    Gast Guest

    Nein, ich habe mich nicht verschrieben. Ich meine ausdrücklich CSS 3 (in Worten: DREI).
     
  8. it-praktikant

    it-praktikant Megabyte

    Registriert seit:
    5. August 2002
    Beiträge:
    1.176
    :D Also über den Netscape hat ja auch keiner was gesagt. Mein Mozilla kann bisher alles mögliche anzeigen, MathML, CSS2.0.

    Und wenn der IE nicht alles von CSS2.0 interpretieren kann, dass unterstütz er demnach also CSS2.0 nicht.

    Ich stelle mir diese Aussagen über Ausnahmen mal beim Autokauf vor:
    "Ja sie haben ein Geländefahrzeug. Aber es kann leider nicht über Hügel und durch Wasser, das einen halben Meter tief ist, fahren. " :D


    ==== Nachtrag ====
    Man stolpert immer wieder darüber, dass der IE in seiner Entwicklung einfach stehen geblieben ist. Einfach mal folgenen Code im IE und im Mozilla anschauen:
    <span class="code" style="white-space: pre; font-family: 'Courier New'; font-size: 14px;">
    01 <span style="color: #008F00;">#include &lt;stdio.h&gt;</span>
    02 <span style="color: #9F0000;">int</span> main() {
    03 <b>return</b> <span style="color: #0000BF;">0</span>;
    04 }</span>
     
  9. Gast

    Gast Guest

    laut selfhtml von netscape 6 auch nicht
    ausserdem unterstützt ie 2.0, aber bei weitem nicht alle befehle!
     
  10. it-praktikant

    it-praktikant Megabyte

    Registriert seit:
    5. August 2002
    Beiträge:
    1.176
    Ich glaube Steele hat sich verschrieben und meint CSS 2.0, von Version 3 habe ich noch nichts gehört und dass CSS 2.0 vom IE noch nicht unterstützt wird ist allgemein bekannt.


    Ciao it.
     
  11. Gast

    Gast Guest

    wo find ich die codes für css3
     
  12. Gast

    Gast Guest

    Tja...und wenn der IE endlich mal CSS3 unterstützen würde, könnte man ganz auf das dämliche JS verzichten und das mit CSS realisieren...achja...im Mozilla geht das schon jetzt ;)
     
  13. Gast

    Gast Guest

    einfach hier klicken!

    also ich würd eher den style visibility einsetzen!


    z.b.
    <html>
    <head>
    <title>CSS Box zeigen/verstecken</title>
    </head>
    <script type="text/javascript">
    function show(id_name)
    {
    if(document.getElementById(id_name.style.visibility == "hidden")
    ocument.getElementById(id_name).style.visibility = "visible";
    else
    document.getElementById(id_name.style.vibility = "hidden";
    }
    </script>
    <style type="text/css">
    #test
    {width:100px;height:100px;background-color:#ff0000;visibility:hidden;}
    </style>
    <body>
    <div id="test">Die ist ein Test</div>
    <a href="javascript('test')">Zeigen/Verstecken</a>
    </body>
    </html>
     
  14. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.487
    Nö, du ersetzt in dem Script die Konstante der ID durch eine Variable. Dessen Wert ist die aktuell anzusprechende ID. Diese musst du dann im Funktionsaufruf mit übergeben - mal ins blaue:

    function versteckt(element)
    ...
    document.getElementById(element).style.display = 'none';
    ...

    onclick="versteckt('ghost')..."

    Gruss, Matthias
     
  15. Aegis

    Aegis Kbyte

    Registriert seit:
    16. März 2002
    Beiträge:
    145
    danke,

    wenn ich nun für jede ID einen anderen Wert nehme, wie mache ich das ganze dan mit der function versteckt()? Mithilfe eines Arrays?
     
  16. it-praktikant

    it-praktikant Megabyte

    Registriert seit:
    5. August 2002
    Beiträge:
    1.176
    Du verwendest getElementById() und das bedeutet, dass dein zweites Menü auch eine zweite, andere ID benötigt.

    Ciao it.
     
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen