ugrás a tartalomhoz

Több DIV nyitása-csukása jQuery-vel

Pal_ur · 2009. Nov. 13. (P), 22.29
Üdv,

a következővel küzdöm.

Van egymás után 4 "h3" címsorom. Mindegyik után egy vagy több "div"-em, amiket más okból nem tudok egy közös "div" alá rendelni.

Azt szeretném jQuery-vel elérni, hogy ha egy "h3"-ra kattintok, akkor azok a "div"-ek, amik utána következnek a következő "h3"-ig, mind láthatóvá váljanak, az összes többi meg becsukódjon.

Van egy mintakódom, ami majdnem jól csinálja, mindössze az a baj, hogy az összes "div" helyett csak az elsőt teszi láthatóvá.

<html>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
  $("p").hide();
  $("h3").click(function() {
      $(this).nextAll().each( function() {
  if ($(this).filter("h3").length) {
     return false;
  }
  $(this).filter("p").slideToggle("slow").siblings("p").slideUp("slow");
      });
  });
});
</script>
<body>
<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h3>The Third Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h3>The Fourth Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
</body>
</html>


Mit rontok el?

Köszönöm!
 
1

Egy megvalósítás

Poetro · 2009. Nov. 13. (P), 23.23
$(function() {
  $("p").hide();
  $("h3").click(function() {
    var $that = $(this);
    // Vesszük a testvéreit, amik P-k
    var ps = $that.siblings('p');
    // Megkeressük a következő H3-at.
    var nextH3 =$that.nextAll('h3:first');
    // Megkeressük az első P-t az elemnünk után
    var first = ps.index($that.nextAll('p:first'));
    // Megkeressük az első P-t a következő H3 előtt, ha létezik, vagy vesszük az utolsó P-t
    var last = ps.index(!!nextH3.length ? nextH3.prevAll('p:first') : $that.nextAll('p:last'));
    // Megjelenítjük azokat, amik ebben a tartományban vannak.
    for (var i=first; i<=last; i++) {
      ps.eq(i).slideDown('slow');
    }

    // Elrejtük a többit.
    $that.prevAll('p').slideUp('slow');
    nextH3.nextAll('p').slideUp('slow');
  });
});
Persze ennél biztosan van optimálisabb megoldás, csak épp ez jutott eszembe.
2

Hálám

Pal_ur · 2009. Nov. 14. (Szo), 10.49
Köszönöm!

Nagyszerűen működik, és bőven ad ötletet!

P.