• 本站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