Question

我的HTML页面上有一个链接列表。我想默认显示3个链接，然后有一个＆＃34;显示更多＆＃34;用户可以单击以显示完整列表的链接。我的问题是关于最好的语义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>

但它看起来效率不高 - 我有很多链接。

此外，＆＃34;显示更多＆＃34;似乎很奇怪链接作为列表元素，逻辑上它不是，但我不确定它应该去哪里。

Answer 1

您可以将显示更多作为列表元素，而不是将其作为列表下的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问题以供参考！

希望有所帮助！

Answer 2

您不需要任何特殊结构。

只需将类.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课程 - 它会显示所有项目。

带有＆＃34;链接列表的有效HTML结构显示更多＆＃34;部分？

2 个答案: