Question

我创建了一个包含ul元素的li。我想在点击同一个div中的链接时向下滑动li。

问题是当我点击链接时会显示所有div。

我使用PHP在每个链接上设置id。

html代码在这里：

  <li class='post'>
    <div class='link'>
      <a href='#'id=". * Here is Post ID * ."></a>
    </div>
    <div class='slidedown'>//here is what I want to sliding</div>
  </li>

jQuery代码在这里：

$(".link a").click(function(){

    var id_post = $(this).attr("id");

    $(".slidedown").slideDown("slow");

    return false;
});

Answer 1

使用.parent()向上移动一个父级。由于容器正在寻找.post，我们必须向上移动2个父母。然后，我们可以找到.slidedown的孩子并将其与.slideDown()

一起向下滑动

$(".link a").click(function(){

    $(this).parent().parent().children('.slidedown').slideDown("slow");

});

Answer 2

你可以更轻松地做到这一点：

<强>的jQuery

$('.link').on('click', function() {
    $(this).parent().find('.slidedown').slideDown('slow');
});

或者您使用：

$('.link a').on('click', function() {
    $(this).closest('.slidedown').slideDown('slow');
});

转到jQuery文档的.closest()或.parent()了解详情。

Answer 3

这里的代码效果很好：

$(".link").click(function(){
     $(this).siblings('.slidedown').slideDown('slow');
});

Answer 4

您可以使用parent()向上移动一级，next()以定位下一个兄弟：

$(".link a").click(function(){
  $(this).parent(".link").next(".slidedown").slideDown("slow");
  return false;
});

或者您可以使用closest()访问.post并使用find()或children()定位.slidedown：

$(".link a").click(function(){
  $(this).closest(".post").find(".slidedown").slideDown("slow");
  return false;
});

单击链接时显示相关的div

4 个答案: