• 本站JQuery隐藏留言的代码修正

    分类：WordPress | 标签： , | 浏览次数：1,351

    在之前《在WordPress中利用Jquery隐藏较旧留言》这篇文章中说了下如何用JQuery这个东西把过旧留言收藏起来，其实效果还是可以，只是单条留言的展开－收起动作的执行区域设置不太恰当，出现留言作者的链接不能直接左键打开（via: johnzon, xiaorsz）。

    今天把这部分的问题进行了小小修改，增加“+”和“－”两个小图标作为展开－收起留言的执行按钮。

    hide comment 本站JQuery隐藏留言的代码修正

    在这里简单说下更改的内容（请对照上文中的代码）：

    更改js代码，把原来的点击区域：

    $(".message_head").click(function(){
    $(this).next(".message_body").slideToggle(500)
    return false;
    });

    改为：

    $(".collapse").click(function(){
    $(this).parents(".message_head").next(".message_body")
    .slideToggle(500);
    $(this).toggleClass("expand");
    });

    然后需要在comment.php中的message_head区块内增加“+”和“－”两个小图代码：

    <span class="collapse"></span>

    再在style.css中增加样式（下面样式为本站所需，请根据自行要求更改）：

    .message_head .collapse {
    background: transparent url(images/comments-collapse.png) no-repeat scroll 0 0;
    cursor: pointer;
    display: block;
    float: right;
    height: 9px;
    line-height: 20%;
    margin: 4px 2px 0 0;
    text-indent: -900em;
    width: 9px;
    }
    .message_head .expand {
    background: transparent url(images/comments-expand.png) no-repeat scroll 0 0;
    }

    更改后的效果请看本站就行了。另外本站的主题Js O3的下载文件也已更新，你也可以下载这个主题，直接看里面的代码就行了。

    或者收藏到 Delicious。建议通过 RSS 订阅本站更新。你还可以 follow me 谢谢！ — by Jinwen @ 2008/12/06 14:17