javascript - jQuery 更改追加 onClick

Question

我有以下 jQuery 代码，它定位页面上的 ul 元素，隐藏 ul 中第三个项目之后的所有 li 项目元素并附加一个 “显示更多!” 文本链接，单击该链接可显示/切换隐藏的列表项。

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

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

这是我希望脚本执行的操作:当隐藏元素在单击“显示更多!” 后显示时，我希望“显示更多!” 文本将替换为 “Show Less!”。这样做对用户更友好，也更有意义。

关于如何实现这一点有什么想法吗？

Answer 1

看看这个:

$('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!")

            })
        );

Worked code