带有"show more"部分的链接列表的有效 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>

还有，参考这个问题!

希望有帮助!