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();
});

より複雑なシナリオでは、いくつかの変数の「状態」を追跡し、それに応じてそれらの変数に対応する必要があります。