jQuery Toggle Onclick auf Elternelement

Question

Wie kann ich den Inhalt .ab-content verstecken, wenn ich auf .ab-head klicken? Auch ausblenden, wenn ich auf ab-head klicke und die content sichtbar ist. Mit dem Code, den ich gerade habe, funktioniert es fast, aber wenn ich auf einen von ihnen klicke wird der ganze Inhalt umgeschaltet.

Wie kann ich halte die Funktion nur auf den parent div? Irgendwelche Ideen?

$(document).ready(function(){ 
    $(".ab-head").click(function(){ 
     $(".ab-content").toggle(); 
    }); 
    $(".ab-content").click(function(){ 
     $(".ab-content").toggle(); 
    }); 
}); 

<div class="ab-container"> 
    <div class="ab-head"> 
     <h1>some name 1</h1> 
    </div> 
    <div class="ab-content"> 
     <p>some text bla bla bla 1</p> 
    </div> 
</div> 
<div class="ab-container"> 
    <div class="ab-head"> 
     <h1>some name 2</h1> 
    </div> 
    <div class="ab-content"> 
     <p>some text bla bla bla 2</p> 
    </div> 
</div> 

Beispiel: https://jsfiddle.net/yppn4nex/

Answer 1

einfach die nächste Instanz von .ab-content wechseln:

$(".ab-head").click(function(){ 
    $(this).next(".ab-content").toggle(); 
}); 

Sie können auch den aktuellen <div class="ab-content"> verweisen, dass der Benutzer über die Verwendung des this Schlüsselwort geklickt hat:

$(".ab-content").click(function(){ 
    $(this).toggle(); 
}); 

Obwohl, wenn Sie wollen, um den Inhalt zu verstecken, wenn Sie darauf klicken, ist es wahrscheinlich besser, etwas entlang der Linien von dem zu tun, was itsgoingdown vermuten lässt.

Schnell Demo:

$(".ab-container").on("click", function(){ 
 
    $(this).find(".ab-content").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ab-container"> 
 
    <div class="ab-head"> 
 
    <h1>some name 1</h1> 
 
    </div> 
 
    <div class="ab-content"> 
 
    <p>some text bla bla bla 1</p> 
 
    </div> 
 
</div> 
 

 
<div class="ab-container"> 
 
    <div class="ab-head"> 
 
    <h1>some name 2</h1> 
 
    </div> 
 
    <div class="ab-content"> 
 
    <p>some text bla bla bla 2</p> 
 
    </div> 
 
</div>

Answer 2

Sie können mit Event-Delegation es wie folgt tun:
Überprüfen Sie die unter

$('.ab-container').on('click', '.ab-content ,.ab-head', function() { 
 

 
    $(this).closest('.ab-container').find('.ab-content').toggle(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ab-container"> 
 
    <div class="ab-head"> 
 
    <h1>some name 1</h1> 
 
    </div> 
 
    <div class="ab-content"> 
 
    <p>some text bla bla bla 1</p> 
 
    </div> 
 
</div> 
 

 
<div class="ab-container"> 
 
    <div class="ab-head"> 
 
    <h1>some name 2</h1> 
 
    </div> 
 
    <div class="ab-content"> 
 
    <p>some text bla bla bla 2</p> 
 
    </div> 
 
</div>

012 Snippet