トグルショーはワンクリックで表示されます

Question

詳細をクリックするとshowsがすべて表示されます。 私が望むのは、彼がクリックするリンクの詳細はtoggleだけです。

Example fiddle

JS：

$('.listt ul').hide(); 

$(document).on('click','.details a',function(){ 
    $('.listt ul').toggle(); 
}); 

Answer 1

CURから始まる.closest('.kop')を使用して、親のdiv幅クラスにkopを行きます家賃クリックしたオブジェクト$(this)、その後、.next('.listt')を使用して、クラスlisttと、次のdivをターゲット：私はをクリックした場合

$('.listt').hide(); 
 

 
$(document).on('click','.details a',function(){ 
 
    $(this).closest('.kop').next('.listt').toggle(); 
 
})

.kop 
 
{ 
 
    display: block; 
 
    width: 100%; 
 
    padding: 5px 0; 
 
} 
 
.kop div 
 
{ 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="kop"> 
 
    <div class="name">John</div> 
 
    <div class="details"><a href="#">(details)</a> </div> 
 
</div> 
 
<div class="listt"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
</div> 
 

 
<div class="kop"> 
 
    <div class="name">John</div> 
 
    <div class="details"><a href="#">(details)</a> </div> 
 
</div> 
 
<div class="listt"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
</div>

Answer 2

$('.listt ul').hide(); 
 
$(document).on('click','.details a', function(){ 
 
\t $('.listt ul').toggle(); 
 
});

.kop { 
 
    display: block; 
 
    width: 100%; 
 
    padding: 5px 0; 
 
} 
 
.kop div{ 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="kop"> 
 
    <div class="name">John</div> 
 
    <div class="details"><a href="#">(details)</a> </div> 
 
</div> 
 

 

 
<div class="listt"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
</div> 
 

 
<div class="kop"> 
 
    <div class="name">John</div> 
 
    <div class="details"><a href="#">(details)</a> </div> 
 
</div> 
 

 
<div class="listt"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
</div>