jquery - 如何在 jQuery 中选择被点击元素的子元素？

Question

我想滑动切换单击元素的子元素，我尝试了这个（演示），但所有具有 .description 类的 div 都会滑动切换。谁能帮我？

HTML：

<div id="container">
<div class="row">
  <div class="item"> <div class="toggle"></div>
    <div class="description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet  </div>
  </div>


  <div class="item"> <div class="toggle"></div>
    <div class="description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea c </div>
  </div>


  <div class="item"> <div class="toggle"></div>
    <div class="description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, </div>
  </div>
</div>

jQuery：

$(document).ready(function(){
  $(".toggle").click(function(){
    $(".description").slideToggle();
  });
});

CSS：

.row{
    width:900px;
}
.toggle{
    width:150px;
    height:200px;
    margin:0 auto;
    background:red;
}
.item{
    float:left;
    width:300px;
    text-align:center;
}
.description{
    display:none;
    text-align:left;
}

Answer 1

您可以使用.next()查找兄弟元素

$(document).ready(function () {
    $(".toggle").click(function () {
        $(this).next(".description").slideToggle();
        //$(this).sibling(".description").slideToggle();
    });
});

演示：小提琴