JQuery Slide bei vielen Elementen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • JQuery Slide bei vielen Elementen

    Hallo,

    ich benutze JQuery um bestimmte Elemente bei einem Klick auf das H3-Element aufzusliden. Hier der Code:

    Quellcode

    1. <div class="slide">
    2. <h3 class="slide_1">Links</h3>
    3. <ul class="slide_1" style="display:none;">
    4. <li>...</li>
    5. <li> ...</li>
    6. </ul>
    7. </div>


    Dazugehörig der JQuery-Code:

    Quellcode

    1. $(document).ready(function () {
    2. $('h3.slide_1').click(function () {
    3. $('ul.slide_1').slideToggle('fast');
    4. });
    5. });


    Bei mehreren Elementen hatte ich bisher immer den HTML-Code und den Javascriptecode um die entsprechende Anzahl der Einträge erweitert. Nun möchte ich aber, dass automatisch jeder Eintrag, der so aufgebaut ist:

    Quellcode

    1. <h3 class="slide">Topic</h3>
    2. <ul style="display: none;" class="slide">
    3. <li>...</li>
    4. </ul>

    automatisch erkannt wird und eine entsprechende Funktion erstellt wird. Ich hoffe ihr könnt mich verstehen und wisst, was ich meine.
    Ich bin selber halt nen kleiner Anfänger, was Javascript angeht. Ich dachte anfangs an eine Schleife, die alle Elemente durchzählt und die entsprechende JS-Funktion erstellt. Jedoch weiß ich nicht, wie ich das Problem löse, dass halt durch das anklicken dieses einen Elements (h3-Tag) auch nur der dazugehörige Listenbereich geslidet wird.
    =O
  • achso, ich habs falsch verstanden. Ich dachte du wolltest alles gleichzeitig einfahren. Nun möchtest du aber auf alle gleichzeitig den Klick Event anwenden.
    Die Anforderungen sind also nicht ganz anders.

    Schritt1

    Quellcode

    1. $('h3.slide').click(function() {
    2. alert('ich wurde geklickt');
    3. });

    funktioniert?

    Nun musst du statt dem alert natürlich was sinnvolles machen..
    Schau dir dazu am besten mal die jQuery DOM Seite an: docs.jquery.com/DOM/Traversing
    Das ul liegt auf gleicher Ebene. Also solltest du es mit next(ul) adressieren können:

    Quellcode

    1. $('h3.slide').click(function() {
    2. $(this).next('ul').slideToggle('fast');
    3. });
  • doch, das return false verhindert dass der Browser nach oben springt.
    Wenn es allerdings zu fehlern in deinem Script kommt (Variable nicht definiert, etc) - dann springt der Browser nach oben.

    Einfacher Beweis:

    Quellcode

    1. <div style="height:2000px"></div>
    2. <a href="">click</a>
    3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    4. <script type="text/javascript">
    5. $(document).ready(function() {
    6. $('a').click(function() {
    7. alert('do toggle');
    8. return false;
    9. });
    10. });
    11. </script>
    Alles anzeigen