0

スクリプト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()" />
4

1 に答える 1

1

gtセレクターを使用できます：

一致したセット内のインデックスよりも大きいインデックスにあるすべての要素を選択します。

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

余分なスペースを追加するタグの代わりに、アンカータグに<br/>使用できます。display: block

a {
   display: block
}
于 2012-06-29T03:51:11.927 に答える