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

Question

我想 slideToggle 被点击元素的子元素，我试过这个(DEMO)但是所有带有 .description 类的 div 都会 slideToggle。 谁能帮帮我？

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();
    });
});

演示:Fiddle