.toggle will nicht wie ich will

  • Hallo,
    lang ist es her.... ich versuche mit Hilfe von jQuery einen Text einzublenden, wenn ich auf eine Überschrift bei mir die <b> Elemente zu klicken beim erneuten Klicken auf die Überschrift, soll der Text wieder ausgeblendet werden.
    In der schule haben wir gelernt diese Befehle mit dem .toggle einzuleiten.
    Aber sobald ich die Seite lade, passiert kurz irgendwas und dann sind alle Elemente verschwunden.


    Kann mir vielleicht jemand erklären was .toggle genau macht und wie ich zur Lösung meines Problems komme?



    Vielen Dank im voraus ! :)



    HTML:


    CSS:


    jQuery:

    Einmal editiert, zuletzt von Bandit () aus folgendem Grund: Formatierung eingebaut, das nächste Mal bitte selber machen!

  • ich versuche mit Hilfe von jQuery einen Text einzublenden, wenn ich auf eine Überschrift bei mir die <b> Elemente zu klicken beim erneuten Klicken auf die Überschrift, soll der Text wieder ausgeblendet werden.


    Ich sehe nirgends in deinem JQuery-Code das du click-Events auf .klickbar abfängst.
    Und wenn du wissen willst was toggle macht, wieso schaust du nicht in die Doku, wieso erwartest du, dass dir das hier jemand abtippt?
    Hier findest du alles was du brauchst für dein Vorhaben:
    http://api.jquery.com/click/
    http://api.jquery.com/next/
    http://api.jquery.com/toggle/

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  • gaaanz ruhig.. das will ich doch auch gar nicht. Ich hab schon in die API hinein geschaut .. aber wirklich auf eine Lösung komme ich nicht. Toggle schaltet doch eig die Funktionen durch, die man eingetragen hat. - oder?


    Ich hab da ein Beispiel aus der Schule.
    Wieso funktioniert das?
    Da bezieht sich doch auch kein click Event auf den 6. Button. - oder?


    Entschuldigt bitte, aber ich komm einfach nicht drauf :/.


    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <title>&Uuml;bung 03 - Effekte</title>
    <link rel="stylesheet" type="text/css" href="layout_03.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js">
    </script>
    <script type="text/javascript" src="js/uebung_04.js">
    </script>
    </head>


    <body>


    <div id="alles">

    <div id="links">
    <img src="pics/stein1.jpg" alt="Stein auf Holz" height="250" width="194" border="0" />
    </div>

    <div id="rechts">
    <img src="pics/stein2.jpg" alt="Stein auf Holz" height="250" width="194" border="0" />
    </div>

    <div id="mitte">
    <input type="button" id="b1" value="linkes Bild ausblenden" /><br /><br />
    <input type="button" id="b2" value="rechtes Bild verstecken" /> <br /><br />
    <input type="button" id="b3" value="linkes Bild anzeigen" /><br /><br />
    <input type="button" id="b4" value="rechtes Bild einblenden" /><br /><br />
    <input type="button" id="b5" value="alles zusammen" /><br /><br />
    <input type="button" id="b6" value="4-fach Button" />
    </div>

    <div id="unten">
    Beim Anklicken der Button werden die Bilder ein- oder ausgeblendet, sowie angezeigt oder versteckt.
    </div>

    </div>


    </body>
    </html>



    CSS:
    body {
    background-color: #4D9453;
    color: White;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18pt;
    }
    #alles {
    background-color: #A62A16;
    margin: 20px auto;
    padding: 20px;
    width: 803px;
    }
    #rechts, #links {
    background-color: #ADDE4E;
    width: 280px;
    }
    #rechts, #mitte, #links {
    height: 280px;
    padding: 50px 0;
    text-align: center;
    }
    input {
    width: 180px;
    }
    div#links {
    float: left;
    }
    div#rechts {
    float: right;
    }
    div#mitte {
    background-color: #FF9D27;
    }
    #unten {
    padding: 20px 0;
    }



    jQuery:
    $(document).ready(function()
    {
    $("#b1").click(function()
    {
    $("#links img").fadeOut("fast")
    });

    $("#b2").click(function()
    {
    $("#rechts img").hide("fast")
    });

    $("#b3").click(function()
    {
    $("#links img").show("fast")
    });

    $("#b4").click(function()
    {
    $("#rechts img").fadeIn("fast")
    });


    $("#b5").click(function()
    {
    $("img").fadeOut("slow").fadeIn("slow").hide("slow").show("slow")
    });

    $("#b6").toggle
    (
    function()
    {
    $("img").fadeOut("slow");
    },
    function()
    {
    $("img").fadeIn("slow");
    },
    function()
    {
    $("img").hide("slow");
    },
    function()
    {
    $("img").show("slow");
    }
    );
    });

  • Der JQuery-Code zu #b6 ist so garantiert nicht richtig, der macht definitiv nicht das, was du oben als dein Wunschverhalten beschrieben hast.


    Ich habe gerade meinen gnädigen, daher gebe ich dir grad mal die paar Zeilen Code die du möchtest. Erwarte das aber nicht nochmal ohne sichtbare Eigenarbeit und Auseinandersetzung mit der Doku (und komm mir nicht wieder damit du hättest die gelesen, deine Posts zeigen das Gegenteil):


    Code
    1. $(function(){
    2. $(".klickbar").click(function(){
    3. $(this).next(".verborgen").toggle(100);
    4. });
    5. });


    Dein überflüssiges <br> hinter deinen <b>-Tags muss dafür entfernt werden. Im übrigen ist <b> da auch kein sinnvolles Tag, wieso keine Überschrift, oder einfach ein div-Tag?

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook