0

为什么在脚本 1 中，当我显示或隐藏元素时，甚至当我将“显示：无”放置为样式时，我无法让隐藏空间消失？但是在脚本 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()" />
4

1 回答 1

1

你可以使用gt选择器：

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

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

而不是<br/>增加额外空间的标签，您可以使用display: block锚标签：

a {
   display: block
}
于 2012-06-29T03:51:11.927 回答