javascript - 关于以下代码的一些疑问

Question

我在 JavaScript 中有一些代码将显示一些项目并隐藏其他项目，通过单击"Show more"选项它将显示更多项目。
但它无法回到初始状态。通过单击相同的按钮，我也希望它进入初始状态。

有谁能够帮我？

这是代码：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li><a href=# class=show>Show More</a></li>
    </ul>
<script>
    $("li:gt(2):not(:last-child)").hide();
    $('.show').click(function() {
        $("li:gt(2)").show();
    });
</script>

Answer 1

代替

$("li:gt(2)").show();

尝试

$("li:gt(2)").toggle();

Answer 2

如果“返回初始状态”是指隐藏上次单击时显示的元素，则可以使用以下.toggle()功能：

$('.show').click(function(){
    $("li:gt(2)").toggle();
});

对于更复杂的场景，您可能必须跟踪某些变量中的“状态”并相应地对这些变量做出反应。