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/