jQuery更改追加onClick

Question

我有以下jQuery代码,它ul在页面上定位元素,隐藏li该ul元素中第三个项目之后的任何项目,并附加"显示更多!" 单击时显示/切换隐藏列表项的文本链接.

$('ul')
    .find('li:gt(2)')
    .hide()
    .end()
    .append(
        $('<li>Show More!</li>').click( function(){
        $(this).siblings().toggle(500);
        })
    );

脚本功能的一个示例:http://jsfiddle.net/vf6j5/

这就是我想要的脚本:当"显示更多!"之后显示隐藏的元素时 点击了,我想要"显示更多!" 用"显示更少!"替换的文本 .这样做会更加用户友好,更有意义.

关于如何实现这一点的任何想法？

Answer 1

http://jsfiddle.net/vf6j5/2/

$('ul')
    .find('li:gt(2)')
    .hide()
    .end()
    .append(
        $('<li>Show More!</li>').click(function() {
            var txt = $(this).text() == "Show More!" ? "Show Less!" : "Show More!";
            $(this).text(txt).siblings(':gt(2)').toggle(500);
        })
    );?

Answer 2

看看这个:

$('ul')
        .find('li:gt(2)')
         .hide()
        .end()
        .append(
            $('<li class="title">Show More!</li>').click( function(){
            $(this).siblings().toggle(500);
                $(".title").html() === "Show More!"
                    ? $(".title").html("Show Less!")
                    : $(".title").html("Show More!")

            })
        );

工作代码