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个项目），那么这里解决方案是：{ {3}}

Answer 2

我试图通过更改高度css值来解决这个问题。我在JsFiddle中对它进行了测试，但它并没有在＆＃34;运行代码片段＆＃34;中运行。 stackoverflow。

＆＃13;

var ydelta = 60;

window.more = function () {
	var list = document.getElementById("the-list");
  list.style.height = '' + (parseInt(list.style.height) + ydelta) + 'px';
};

window.less = function () {
	var list = document.getElementById("the-list");
  list.style.height = '' + (parseInt(list.style.height) - ydelta) + 'px';
};

＆＃13;

<ul id="the-list" style="overflow:hidden;height:60px;">
    <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="javascript:more();">more</a> 
<a href="javascript:less();">less</a>

＆＃13;

跳转到锚点溢出隐藏

2 个答案: