Question

我想要滑动点击元素的子节点，我尝试了这个（DEMO）但是所有带有.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();
    });
});

演示：Fiddle

如何在jQuery中选择clicked元素的子元素？

1 个答案: