我试图使一个列表充满了未知数量的项目动画从一个div下面出来,当它被悬停在这样一种方式,它似乎是列表被拉下来,而不是调整大小。(jquery的slideDown()和slideToggle()函数很好地完成了"下拉"版本,但我希望列表项的下拉效果有点像你在卷窗帘上写的东西,然后把它卷下来。)
列表、div或表格无关紧要;只要它看起来像我想要的。
以下是我尝试过的要点。在实际应用程序中,唯一的问题是,当它在向上滚动的位置时,(有时)它比父div高,并显示在父div的上方。
在下面的代码中(来自jsfiddle),我希望#popouter只显示在#toggle下方,而不是当它被"卷起"时显示在#toggle上方:
<div id="oneofmanyitems">
<div id="toggle"><h2>Click me to reveal the generated texts</h2></div>
<div id="popouter">
<div>Some generated text</div>
<div>Some generated text</div>
<div>Some generated text</div>
<div>Some generated text</div>
</div>
</div
我希望有一种方法可以让列表项"浮动"下来,只是animate()向上的列表的高度,直到所有的项目(从最顶部开始)弹出由于溢出:隐藏,但这似乎不可能没有给项目的位置:绝对,从而使它们出现在彼此的顶部在列表的底部。
通常,我只是用jquery强制div在父div下面滚动一段任意时间后消失,但在这种情况下,我也有list-div,在这种情况下,当它向上滚动时,需要部分(隐藏在顶部)
谁有什么想法,如何使这个工作?也许我现在只是陷入了困境,没有看到明显的答案。
谢谢!
试试这个代码
<div id="oneofmanyitems">
<div id="toggle" class="active">
<h2>Click me to reveal the generated texts</h2>
</div>
<div id="popouter">
<div>Some generated text</div>
<div>Some generated text</div>
<div>Some generated text</div>
<div>Some generated text</div>
</div>
</div>
$('#toggle').click(function(){
if ($(this).hasClass('active')){
$(this).removeClass('active');
$("#popouter").slideUp();
}else{
$(this).addClass('active');
$("#popouter").slideDown();
}
return false;
});
在使用$("#popouter").animate({marginTop: -h}, 1000);
的地方为什么不尝试$("#popouter").slideToggle();
…在css中
.popouter{display:none}
和JS中的
$('.toggle').click(function(){
var $div = $(this).next('.popouter').slideToggle();
$(".popouter").not($div).hide();
});
使用class代替id