1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

[jQuery]Wieso fährt mein container nicht ein?

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von Andre267, 5. Mai 2012.

  1. Andre267

    Andre267 Erfahrenes Mitglied

    Schönen guten Abend,

    ich denke zu diesen Quellcode brauche ich eigentlich nicht viel erklären nur das es warum auch immer nicht geht...

    HTML:
    1.  
    2.     <head>
    3.         <title>Test Seite - Selektieren</title>
    4.         <link rel="stylesheet" type="text/css" href="style.css" />
    5.         <script src="jquery-1.7.2.js" type="text/javascript"></script>
    6.         <script src="site.js" type="text/javascript"></script>
    7.     </head>
    8.     <body>
    9.     <center>
    10.     <br>
    11.     <br>
    12.         <div class="main">
    13.             <div class="navi">
    14.                 <ul>
    15.                     <li>Home</li>
    16.                     <li>News</li>
    17.                     <li>Produkte</li>
    18.                         <ul>
    19.                             <li><a href="#">Pferde</a></li>
    20.                             <li><a href="#">Esel</a></li>
    21.                             <li><a href="#">Schwein</a></li>
    22.                         </ul>
    23.                     <li>Impressum</li>
    24.                 </ul>
    25.             </div>
    26.             <div class="content">
    27.                 <h2>News</h2>
    28.                 <div class="news">
    29.                     Hier stehen News und hast du nicht gesehen...
    30.                 </div>
    31.             </div>
    32.             <div class="test">
    33.                 Hier steht Ihre Werbung
    34.             </div>
    35.                 <div class="unfloat">
    36.                 </div>
    37.         </div>
    38.     </center>
    39.     <h2>test</h2>
    40.     <div class="news">
    41.         test text
    42.     </div>
    43.    
    44.     </body>
    45. </html>
    46.  
    HTML:
    1.  
    2. body{
    3.     margin: 0px;
    4.     padding: 0px;
    5. }
    6.  
    7. .main{
    8.     border: 1px solid black;
    9.     width: 800px;
    10. }
    11.  
    12. .navi{
    13.     float: left;
    14.     width: 220px;
    15.     border: 1px solid blue;
    16. }
    17.  
    18. .content{
    19.     float: left;
    20.     width: 380px;
    21.     border: 1px solid silver;
    22. }
    23.  
    24. .news{
    25.     border: 1px solid red;
    26.     width: 300px;
    27. }
    28.  
    29. ul li{
    30.     margin: 0px;
    31.     padding: 0px;
    32.     list-style-type: square;
    33. }
    34.  
    35. ul li:hover{
    36.     background-color: silver;
    37.     color: white;
    38.     margin: 0px;
    39.     padding: 0px;
    40.     list-style-type: square;
    41. }
    42.  
    43. ul li li a:hover{
    44.     background-color: grey;
    45.     color: yellow;
    46. }
    47.  
    48. .test{
    49.     float: left;
    50.     width: 194px;
    51.     border: 1px solid blue;
    52. }
    53.  
    54. .unfloat{
    55.     clear: left;
    56. }
    57.  
    Code (Text):
    1.  
    2. $(document).ready( function() {
    3.    
    4.     //SlideToogle
    5.     $('h2').click(function {
    6.         console.log('klick');
    7.         $('.news').slideToogle();
    8.     });
    9.  
    10. });
    11.  
    Kann mir jemand helfen?
  2. SpiceLab

    SpiceLab ZENmechanic

    Zeile 4 enthält einen Syntaxfehler, worin im Anschluß von .click(function das ()-Klammerpaar fehlt.

    Die Fehlerkonsole gibt hierzu auch diese Meldung zurück:
    Hiermit funktioniert das Script:
    Code (Javascript):
    1.  
    2. $(document).ready(function() {
    3.  
    4.   //SlideToogle
    5.   $('h2').click(function() {
    6.     console.log('klick');
    7.     $('.news').slideToggle('slow') // zzgl. alternativer Angabe zum Parameter "duration" für die Animationsdauer
    8.   });
    9. });
    10.  
    Siehe auch .slideToggle() incl. der Beispiele.
    Zuletzt bearbeitet: 6. Mai 2012

Diese Seite empfehlen