Blogspot 评论展开/收起 javascript

在 Blogger/Blogspot 实现了 javascript 点击展开或收起评论框，好处有二：当评论数量极多时可以快速收起评论块（DIV），读者能直接处理评论框下方的页面信息；如果同时加载多个评论插件（例如多说、Blogger 原生评论），JS 可快速切换评论插件交替出现。

代码

<a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#ds-thread&quot;).slideToggle();$(&quot;#comments&quot;).hide(); $(&quot;#fb-comments&quot;).hide();$(&quot;#disqus_thread&quot;).hide();' title='使用多说评论'><i class='sprite sprite-ds'/></a> 

释义

蓝色渲染的#ds-thread是操作对象评论框的元素标识。鼠标点击展开、收起的操作指向这个元素标识（id）。这里展开、收起切换（toggle）元素标识的 javascript 语法是：

onclick='$("#id-name").slideToggle()

红色渲染的元素标识用在排他性评论框。上述代码表示：无论#ds-thread是展开还是收起，其他元素都给我一齐好好藏着。

绿色渲染的这一段 HTML 代码自由度极大，可以展示一段文字、一个图标、一个 CSS Sprite 对象，也就是鼠标点击网页的对象。

使用

首先，在 Blogger/Blogspot 控制后台加入第三方评论插件的代码。

接着，在紧贴

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>

的前面加入上述 javascript toggle 代码。

记得评论插件的元素标识（id）的命名和数量与 javascript toggle 内的控制对象完全对应。譬如说，额外加载了多说、Facebook 和 Disqus 插件，在 javasript toogle 也要按 #ds-thread、#ds-facebook、#ds-disqus 元素标识对应。

最后，如果有必要的话写入层叠样式 CSS，改变切换元素标识的外观。