jQuery親要素のonclickを切り替える

Question

.ab-headをクリックすると、.ab-contentの内容を非表示にするにはどうすればよいですか？ ab-headとcontentをクリックしても表示されません。私が今持っているコードではほとんど動作しますが、そのうちの1つをクリックするとすべてのコンテンツはトグルされます。

どうすればこの機能をparent divでのみ維持できますか？何か案は？

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

例：https://jsfiddle.net/yppn4nex/

Answer 1

だけ.ab-contentの次のインスタンスを切り替える：

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

あなたはまた、ユーザがthisキーワードを使用してをクリックしたことを、現在の<div class="ab-content">を参照することができます。

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

コンテンツをクリックしたときに非表示にしたい場合は、その内容が示唆している内容の行に沿って何かを行う方がよいでしょう。

クイックデモ：

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

あなたはイベントの代表団とこのようにそれを行うことができます。
チェック以下が

$('.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をスニペット