「もっと見る」セクションのリンクのリストに有効なHTML構造はありますか？

Question

私は自分のHTMLページにリンクのリストを持っています。私はデフォルトで3つのリンクを表示し、ユーザーがクリックして完全なリストを表示できる「もっと見る」リンクを持っています。私の質問は、このための最も意味のあるHTML構造についてです。

これが今の私のHTMLです：

<ul> 
<li>my link</li> 
<li>my link</li> 
<li>my link</li> 
<li><a href="#" id="more">show more</a></li> 
<span id="showmore"> 
<li>my link</li> 
<li>my link</li> 
... 
</span> 
</ul> 

そして、私はいくつかのJavascriptが最初に#showmoreの内容を非表示にすると、リストの残りの部分を表示するには#moreのクリックを処理する必要があります。

$("#showmore").hide(); 
$("#more").on('click', function(e) { 
    e.preventDefault(); 
    $("#showmore").show(); 
}); 

しかし、私の質問は、はどのように私は、この有効なHTMLを作っても、それは賢明な、コンパクトHTML作るのですか？

私は次の操作を行うことができると思います：

<ul> 
<li>my link</li> 
<li>my link</li> 
<li>my link</li> 
<li><a href="#" id="more">show more</a></li> 
<li class="more">my link</li> 
<li class="more">my link</li> 
... 
</ul> 

しかし、それは非常に効率的でいないようだ - 私はリンクがたくさんあります。

また、 "show more"リンクをリスト要素として持つことは奇妙に思えますが、それは論理的にはそうではありませんが、それ以外にどこに行かなければならないのかは分かりません。

Answer 1

特別な構造は必要ありません。

ちょうどあなたのコンテナと、このスタイルルールにクラス.briefを追加します。

.list-container.brief li:nth-child(n+4) { display:none; }

<div class="list-container brief"> 
 
     <ul> 
 
     <li>my link 1</li> 
 
     <li>my link 2</li> 
 
     <li>my link 3</li> 
 
     <li>my link 4</li> 
 
     <li>my link 5</li> 
 
     </ul> 
 
</div>

、あなたは完全なリストを表示する必要があること.briefクラスを削除する - それは、すべての項目が表示されます。

Answer 2

を表示する代わりに、リスト要素としてを表示する代わりに、リストの下にdivとして別に表示し、論理に基づいて特定のリスト項目の表示を切り替えることができます。

このような何か、

<div class="list-container"> 
     <ul> 
     <li>my link</li> 
     <li>my link</li> 
     <li>my link</li> 
     <li class="more">my link</li> 
     <li class="more">my link</li> 
     </ul> 
    </div> 
    <div class="show-list"> 
     <a href="#" id="more">show more</a> 
    </div> 

また、参考のためにthis質問を参照してください！

希望に役立ちます！