JQuery Slide bei vielen Elementen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • JQuery Slide bei vielen Elementen

    Hallo,

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

    Source Code

    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:

    Source Code

    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:

    Source Code

    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

    Source Code

    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:

    Source Code

    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:

    Source Code

    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>
    Display All