跳转到锚点溢出隐藏

Question

<ul id="the-list" style="overflow:hidden;height:100px;>
    <li><a id="link1" href="#">Link 1</a></li>
    <li><a id="link2" href="#">Link 2</a></li>
    <li><a id="link3" href="#">Link 3</a></li>
    <li><a id="link4" href="#">Link 4</a></li>
    <li><a id="link5" href="#">Link 5</a></li>
    <li><a id="link6" href="#">Link 6</a></li>
    <li><a id="link7" href="#">Link 7</a></li>
    <li><a id="link8" href="#">Link 8</a></li>
    <li><a id="link8" href="#">Link 9</a></li>
<ul>
<a href="">more</a> <a href="">less</a>

上面的div显示了前三个链接.选择更多时,我想显示4-6.它不需要进行任何平滑滚动.在stackoverflow上找到了几个类似的例子,但它们没有像这样涉及ul之外的链接.想知道最简单的选择是什么.另外作为奖励会喜欢更少的按钮,可以撤消更多.如果它提前显示接下来的三次点击就会回到3？

必要时可以使用jquery.想要保持它只是积极的.谢谢你的任何想法,我会继续研究.

Answer 1

我不确定我是否正确，但如果您想更改可见内容#the-list（显示下 3 项并隐藏前 3 项），那么这里有一个解决方案：https://jsfiddle.net/hzonoyg0/