切换节目只点击了一个

Question

如果我点击详细信息shows全部。 我想要的是他只会toggle我点击的链接细节。

Example fiddle

JS：

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

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

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

从当前点击的对象kop开始，使用.closest('.kop')转到父div宽度类$(this)，然后使用{{1}定位下一个类listt的div }}：

.next('.listt')

$('.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;
}