Javascript 单击链接时显示相关div

我创建了一个包含

li

元素的

ul

。单击同一

li

中的链接时，我想向下滑动

div

问题是，当我单击链接时，会显示所有

div

s

我使用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>

使用

.parent（）

向上移动一个父级。由于我们要查找的容器是

.post

，因此我们必须向上移动2个父容器。然后我们可以找到它的子对象，即

.slidedown

，并使用

.slidedown（）

---

您可以更轻松地完成：

jQuery

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

或者您使用：

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

---

请转到jQuery文档或访问jQuery文档以了解更多信息。

以下是运行良好的代码：

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

您可以使用向上移动一个级别并以下一个同级为目标：

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

或者，您可以使用访问

.post

，并使用或指向

.slidedown

：

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

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

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