.toggle will nicht wie ich will

Gero

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:

HTML

<!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>

Alles anzeigen

CSS:

Code

.aussen{
background-color: orange;
width: 800px;
height: auto;
}


.verborgen{
display: none;
}


.klickbar{
cursor: pointer;
}

Alles anzeigen

jQuery:

Code

$(document).ready(function()
{
    $(".klickbar").toggle
        (
            function()
            {
                $(".verborgen").fadeIn("slow");
            },
            function()
            {
                $(".verbergen").fadeOut("slow");
            }
       &nbsp;);
});

Alles anzeigen

SinnlosS

Zitat von Gero

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/

Gero

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

Bandit

Unter deinem ersten Beitrag steht:

Zitat

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?!?!?!?

SinnlosS

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?

Tags

Benutzer online in diesem Thema