Ergebnis 1 bis 5 von 5

Thema: .toggle will nicht wie ich will

  1. #1
    Gero
    Gast

    Standard .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:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
        <head>
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
            <meta name="generator" content="Adobe GoLive">
            <title>Unbenannte Seite</title>
            <link href="blind.css" rel="stylesheet" type="text/css" media="all">
            <script src="jquery-1.9.1.min.js" type="text/javascript">
            </script>
            <script src="einblenden.js" type="text/javascript">
            </script>
        </head>
    
        <body bgcolor="#ffffff">
            <div class="aussen">
                <b class="klickbar">Überschrift1</b><br>
                    <p class="verborgen">
                                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut .
                                    </p>
                <b class="klickbar">Überschrift2</b><br>
                    <p class="verborgen">
                                       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod te  lidnt ut abore et olore.                        
                                    </p>
                <b class="klickbar">Überschrift3</b><br>
                    <p class="verborgen">
                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invi em ipsum dolor sit amet. 
                                    </p>
                <b class="klickbar">Überschrift4</b><br>
                    <p class="verborgen">
                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy magna aliquyam erat, sed diam voluptua. At vero
                                    </p>
            </div>
        </body>
    
    </html>
    CSS:
    Code:
    .aussen{
    background-color: orange;
    width: 800px;
    height: auto;
    }
    
    .verborgen{
    display: none;
    }
    
    .klickbar{
    cursor: pointer;
    }
    jQuery:
    Code:
    $(document).ready(function()
    {
        $(".klickbar").toggle
            (
                function()
                {
                    $(".verborgen").fadeIn("slow");
                },
                function()
                {
                    $(".verbergen").fadeOut("slow");
                }
           &nbsp;);
    });
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Bandit (01.03.2013 um 16:13 Uhr) Grund: Formatierung eingebaut, das nächste Mal bitte selber machen!

  2. #2
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: .toggle will nicht wie ich will

    Zitat Zitat von Gero Beitrag anzeigen
    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

  3. #3
    Gero
    Gast

    Standard AW: .toggle will nicht wie ich will

    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");
    }
    );
    });

  4. #4
    Bandit
    Gast

    Standard AW: .toggle will nicht wie ich will

    Unter deinem ersten Beitrag steht:
    Geändert von Bandit (Heute um 15:13 Uhr) Grund: Formatierung eingebaut, das nächste Mal bitte selber machen!
    Was hast du daran nicht verstanden?!?!?!?

  5. #5
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: .toggle will nicht wie ich will

    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:
    $(function(){
      $(".klickbar").click(function(){
        $(this).next(".verborgen").toggle(100);
      });
    });
    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

Ähnliche Themen

  1. JQuery - Toggle Funtkion
    Von phzu im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 20.09.2011, 12:55
  2. jquerry und toggle
    Von Einste1n im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 02.11.2008, 17:17
  3. Toggle/Spoiler
    Von Ralf Wedmann im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 30.05.2008, 21:17
  4. toggle für Trottle
    Von Questionmark im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 23.11.2006, 03:10
  5. Toggle Script
    Von Stinki im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 20.06.2006, 22:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •