0

我很难做到这一点。基本上有一个微博帖子列表。每篇文章之后都有一个编辑表单，但最初设置为在 css 中不显示。我只想显示 (slideToggle) 编辑表单，它直接位于单击编辑链接 ($this) 的微博帖子之后。

注意：在下面的描述中我只提到。我的意思是页面上有很多编辑表单，但我只想显示article.post之后点击a.edit_this的那个。

<div id="microblog">
    <article class="post">
      <figure class="av">
    <img src="avatarurl" alt="">
      </figure>
      <div class="post_text">
    <h3>Post title <span> <a href="#" class="edit_this">Edit link</a></span>   <span>Delete</span></h3>
    <div class="postmeta">Date<span>Time</span></div>
           <p>Post body</p>
    <br>
    <a href="#" class="details">Details</a>
      </div>
    </article>  <-- End of micropost

    <form class="edit_form">  <-- Need to show only this when clicking on the .edit_this 
                                  link in the above micropost
    </form>

    <article class="post"> <-- Beginning of next micropost
      <figure class="av">
    <img src="avatarurl" alt="">
      </figure>
      <div class="post_text">
    <h3>Post title <span> <a href="#" class="edit_this">Edit link</a></span>   <span>Delete</span></h3>
    <div class="postmeta">Date<span>Time</span></div>
           <p>Post body</p>
    <br>
    <a href="#" class="details">Details</a>
      </div>
    **</article>**  <-- End of micropost
4

2 回答 2

3 
$('.edit_this').on('click',function(){    
    $(this).closest('.post').next('.edit_form').slideToggle();
});

如果每个表单编辑不止一篇文章，您可能必须使用 nextAll()

于 2013-08-04T13:59:13.420 回答
1

我不太确定上面的微博在哪里，但是：

如果它实际上是在微博之后（不在微博之内），那么如果表单是下一个元素：

$this.next().slideToggle();

如果它遵循微博但中间有一些元素：

$this.nextAll("selector for edit form").first().slideToggle();

如果它在微博中，那么：

$this.find("selector for edit form").slideToggle();
于 2013-08-04T13:58:46.433 回答