javascript - .slideToggle();适用于所有其他 div 吗？

Question

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

您可以在此处的测试博客上查看进度:http://noitsnotitsnotokay.tumblr.com/

到目前为止，这就是我对 HTML 和 Javascript 的了解(每个帖子的 HTML 部分都会重复，并且由于 Tumblr 默认设置，我无法为每个帖子创建一个新类):

<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 & 多个 <script>具有相同绑定(bind)操作的 block 。

喜欢:

{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/