.slideToggle（）;适用于其他所有div吗？

Question

我正在尝试使用slideToggle，以便在点击+符号时显示帖子信息。

您可以在此处查看测试博客的进展情况：http://noitsnotitsnotokay.tumblr.com/

到目前为止，这是我对HTML和Javascript的重复（HTML部分重复每个帖子，因为Tumblr defauts，我不能为每个帖子创建一个新类）：

<div id="info">
<div class="pstinfo">
    <!-- info here -->
</div>
<span class="plsign">+</span>
</div>

<script>
$("div.pstinfo").hide();
$("span.plsign").click(function() {
$(this).parent().children("div.pstinfo").stop().slideToggle("slow");
return false;
});
</script>

正如您可能在测试博客中看到的那样，它可以在一个帖子中工作，而在下一个帖子中，它不会一直打开。有什么方法可以解决这个问题吗？

Answer 1

我在代码中看到的主要问题是，每次评论时都会重复代码块。

因此，您有多个DIV具有相同的ID＆amp;多个<script>块具有相同的绑定操作。

像：

{Block:Posts}
    <div><!-- // code in OP example (html+ID+Class+js) --></div>
{/Block:Posts}

那给你：

<div><!-- // code in OP example (html+ID+Class+js) --></div>
<div><!-- // code in OP example (html+ID+Class+js) --></div>
<div><!-- // code in OP example (html+ID+Class+js) --></div>
...

OP代码的错误示例：http://jsfiddle.net/gmolop/2fUjr/

---

我建议先做其他事情，将其改为：

{Block:Posts}
    <div><!-- // HTML code in OP example (only class, no ID) --></div>
{/Block:Posts}
<script> /* JS in OP example (outside the loop) */ </script>

这会给我们类似的东西：

<div><!-- // HTML code in OP example (only class) --></div>
<div><!-- // HTML code in OP example (only class) --></div>
<div><!-- // HTML code in OP example (only class) --></div>
<script>  /* JS in OP example (only once) */ </script>

使用建议格式的工作示例：http://jsfiddle.net/gmolop/2fUjr/1/

Answer 2

JSFiddle：http://jsfiddle.net/Unc2U/5/

编辑：既然你的JS似乎不喜欢.next（），那就试试吧.siblings（）。

$(".pstinfo").hide();
$(".plsign").click(function() {
    $(this).siblings(".pstinfo").slideToggle("slow");
});

http://api.jquery.com/siblings/