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

如果通过“返回初始状态”意味着隐藏上一次点击中显示的元素，则可以使用the .toggle() function：

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

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

对以下代码有些怀疑

2 个答案: