Skip to main content

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='$(&quot;#id-name&quot;).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,改变切换元素标识的外观。

Comments

TOP