8

我想创建一个如下所示的 div:

<div id="upButton">&nbsp;</div>
<div id="divWithExcessiveContent" style="overflow: hidden; height: 20px;">
    content number 1<br/>
    content number 2<br/>
    content number 3<br/>
    content number 4<br/>
    ...
    content number 100<br/>
</div>
<div id="downButton">&nbsp;</div>

根据上面的代码,#divWithExcessiveContent的内容应该只有直到,也许"content number 20"其余的都是隐藏的。单击时#downButton,内部div应向下滚动,显示下面的内容"content number 20"

我怎样才能使用 jQuery 做到这一点?

4

2 回答 2

3

我为你创建了两个 jsFiddles。希望这是您想要对您的项目列表执行的操作

您可以通过引入另一个容器 div 并调整高度/边距顶部和底部来滚动/显示下一个来做到这一点。

<div id="upButton">&nbsp;</div>
<div id="container" style="overflow: hidden;height: 40px;">
<div id="divWithExcessiveContent" >
    content number 1<br/>
    content number 2<br/>
    content number 3<br/>
    content number 4<br/>
    content number 5<br/>
    ...
    content number 100<br/>
</div>
</div>
<br>
<div id="downButton" style="border:solid 1px;width:50px;">Button</div>

查询:

var i = 0;
$('div#downButton').click( function() {
    i = i - 20;
   $('div#divWithExcessiveContent').css('margin-top', i + 'px');
  });

i) 类似滚动的行为演示

http://jsfiddle.net/vendettamit/4xuV4/

ii) 可展开的 div 以显示下一个元素演示

http://jsfiddle.net/vendettamit/kmHPk/

于 2013-06-26T15:57:30.233 回答
0

可能此链接对您有帮助?

它使您可以将元素滚动到某个位置,例如

$('#divWithExcessiveContent').scrollTo( {top:'-=100px', left:'+=100'}, 800 );

请注意,它是 jQuery 的插件,因此您必须检查您的 jQuery 是否已经拥有它们。

希望这对您有所帮助。

于 2013-06-26T15:18:58.613 回答