2

我正在尝试使用以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>

正如您可能在测试博客中看到的那样，它在一篇文章中有效，而在下一篇文章中，它不会一直打开。有没有什么办法解决这一问题？

4

2 回答 2

2

我在您的代码中看到的主要问题是您每次都在每个评论上重复代码块。

因此，您有多个DIV具有相同ID和多个<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/

于 2013-08-19T18:33:40.677 回答
0

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

编辑：由于你的 JS 似乎不喜欢 .next()，让我们试试 .siblings()。

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

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

于 2013-08-19T17:13:11.263 回答