无法让jQuery正确显示或隐藏元素

Question

为什么它在脚本1中当我显示或隐藏元素时甚至当我将“display：none”作为样式时，我无法获得隐藏的空间消失？但是在脚本2中它运行得很好吗？我究竟做错了什么？下面是代码的运作图像：

脚本1：     

<script>
    $(document).ready(function() {
        // if there are more than 4 posts, hide all after 4 and show the 'show more' link
        if($('a').length >= 4) {
            $('a').slice(4).hide();
            $("#showMore").show();

            // below display's 'show more' link. when clicked displays hidden comments and hides 'show more' link
            $("#showMore").click(function() {
                $('a').slice(4).show();
                $("#showMore").hide();
            });
        }
    });
</script>

<a>test </a><br>
<a>fed </a><br>
<a>fdes </a><br>
<a>grr </a><br>
<a>rerf </a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>

<span id="showMore" href="javascript:void(0)" style="display: none">Show More</span>

脚本2：

<p id="example">This is an example of text that will be shown and hidden.</p>

<input type="button" value="Hide" onclick="$('#example').hide()" />
<input type="button" value="Show" onclick="$('#example').show()" />

Answer 1

您可以使用gt选择器：

  

选择匹配集中索引大于索引的所有元素。

$('a:gt(4)').hide();

而不是添加额外空间的<br/>标记，您可以将display: block用于锚标记：

a {
   display: block
}