'5つ以上のリンクと表示の場合はテキストを追加します。 5 '以上のスクリプトがある場合は？

Question

私はそうのように私のコードを持っている：

.keywords a { 
font-style:italic;} 

.keywords a:nth-of-type(n+5) { 
display:none} 

<div class="keywords">{Keywords}</div> 

キーワードがリンクされていると自動的に追加されます。

例えば、[これらの全てが異なるとして見ることができるが唯一の最初の5つは、これは、このコード自体では発生しません、表示されますけれども（それは、あなたがしたいできるだけ多くのキーワードを追加することが可能ですページの記事、それぞれが、これは= 'キーワード']

K1をDIV持っ

K1、K2、K3

K1、K2、K3、K4、K5

_

5つの以上のキーワードがある場合：

K1、K2、K3、K4、K5 [、K6、K7] - この二つは、私はそれがしたいどのように見える

ではありませんがこと（も7キーワード）：

K1、K2、K3、K4、K5 [、K6、K7]より - K6とK7は再び隠されているが、 'もっと' リンクが追加されます）今

I 5つ以上のキーワードがある場合は 'more-link'を追加して、 'more'を追加しますが、これを行う方法はわかりません。スクリプトが必要ですか？

Answer 1

そういう意味ですか？ https://jsfiddle.net/cd4aa8a0/1/

は、だから私は、JSを少し含まれており、私はスクリプトが「より」はケースをリンクするために必要だと思うあなたのCSS

.keywords:nth-child(n+6) a { 
    display: none; 
} 

JS

$(".show").on('click', function(){ 
     $(".keywords:nth-child(n+6) a").toggle(); 
    });