Comment basculer seulement les .class * suivant * ou div (pas le reste)

Question

Je me demandais comment passer un « enfant » div seulement, en cliquant sur un bouton qui se répète sur le HTML, comme:

<div class="button"> 
    <div class="hide toggle"> 
      Blah1 
    </div> 
</div> 
<div class="button"> 
    <div class="hide toggle"> 
      Blah2 
    </div> 
</div> 
<div class="button"> 
    <div class="hide toggle"> 
      Blah3 
    </div> 
</div> 

Le but serait d'affecter uniquement la div enfant imediate, et de garder le reste caché.

Je ne sais pas si c'est possible.

Ce morceau de code me affin de tous les divs:

<script type="text/javascript"> 
    $(document).ready(function(){ 

    $('.button').click(function() { 
    $('.toggle').slideToggle(); 
    }, function() { 
     $('.toggle').slideToggle(); 
    }); 

    }); 
</script> 

Un grand merci pour votre aide.

Answer 1

essayer

$(this).next('.toggle').slideToggle(); 

ou

$(this).children('.toggle:first').slideToggle(); 

Answer 2

A l'intérieur du gestionnaire d'événements Cliquez sur ce mot-clé fait référence à l'élément qui a été cliqué. Remplacez votre $ ('bascule'). SlideToggle() lignes avec

$('.toggle',this).slideToggle(); 

Answer 3

Thomas Stock et Russ Cam ont raison ... Je viens enveloppé correctement. Collez cela sur votre page quelque part ... généralement dans la tête ou dans le pied de page après tout votre code.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".button").click(function() { 
    $(this).next('.toggle').slideToggle(); 
    }); 
    }); 
</script> 

Answer 4

ce que je dois faire si mon DIV que je veux passer n'est pas enfant-élément du clic-élément, par exemple:

<span onclick="$(this).next('.showme').slideToggle();">Klick to show first Showme-Class</span> 
<div class="showme">You've clicked the first span-element</div> 

<span onclick="$(this).next('.showme').slideToggle();">Klick to show second Showme-Class</span> 
<div class="showme">You've clicked the second span-element</div> 

<span onclick="$(this).next('.showme').slideToggle();">Klick to show third Showme-Class</span> 
<div class="showme">You've clicked the third span-element</div>