jQuery geçiş öğesi üst öğesinde onclick

Question

.ab-head'u tıklatırsam, .ab-content içeriğini nasıl gizleyebilirim? Ayrıca, ab-head tıklatıldığında ve content görünür olduğunda gizleyin. Şu anda sahip olduğum kod ile hemen hemen çalışıyor, ancak bunlardan birine tıkladığımda tüm içerik değiştirildi.

Bu işlevi yalnızca parent div'da nasıl koruyabilirim? Herhangi bir fikir?

$(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> 

Örnek:

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

Ayrıca kullanıcı this anahtar kelimesini kullanarak tıkladım ki şimdiki <div class="ab-content"> başvurabilirsiniz: https://jsfiddle.net/yppn4nex/

Answer 1

Sadece .ab-content sonraki geçtiği geçiş:

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

İçeriği tıklattığınızda içeriği gizlemek istiyorsanız, büyük olasılıkla, devam edenlerin önerdiği satırlarda bir şeyler yapmak daha iyi olabilir.

Hızlı 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

Olay heyeti ile böyle yapabilirsiniz:
aşağıda

$('.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 pasajı edin