Javascript 如何制作一个；卷帘-卷起时，样式下拉菜单不会在其父项上方弹出

我正试图使一个列表充满未知数量的项目，当它被悬停在一个div上时，它会从下方动画显示出来，这样看起来列表好像是被拉下了，而不是被调整了大小。（jquery slideDown（）和slideToggle（）函数很好地实现了“下拉”版本，但我希望列表项的下拉方式有点像您在卷帘上书写并将其向下滚动一样。）

列表、div或表并不重要；只要看起来是我想要的

一本关于我尝试过的要点的书。在中，唯一的问题是当它处于向上滚动位置时，（有时）它高于父div，并显示在其上方

在下面的代码（来自jsfiddle）中，我希望#poputer仅在它位于#toggle下方时显示，而不是在它被“卷起”时在其上方竖起时显示：

单击我以显示生成的文本
一些生成的文本
一些生成的文本
一些生成的文本
一些生成的文本
试试这个代码


<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;
 });


单击我以显示生成的文本
一些生成的文本
一些生成的文本
一些生成的文本
一些生成的文本
$（“#切换”）。单击（函数（）{
if（$（this）.hasClass（'active'））{
$（this.removeClass（'active'）；
$（“#poputer”）.slideUp（）；
}否则{
$（this.addClass（'active'）；
$（“#poputer”）.slideDown（）；
}
返回false；
});
代替使用
$（“#poputer”）.animate（{marginTop:-h}，1000）为什么不试试
$（“#poputer”）.slideToggle（）。。
在css中

还有JS

$('.toggle').click(function(){
      var $div = $(this).next('.popouter').slideToggle();
      $(".popouter").not($div).hide();   
});

上面的脚本用于多个div。请使用类而不是id
为什么不尝试使用jquery ui accordion来代替。我知道动画略有不同，但是
slideToggle（）
对您没有好处吗@RoryMcCrossan，当然，我之前一直在玩这个，但我有点想要卷帘式的（你明白我的意思，对吧？），而且看起来不应该那么难。@Lucky，是的，看起来不错。如果我没有办法做我想做的事，我可能会用它。假设它能用不同尺寸的手风琴。谢谢，但这是我已经有的，但不喜欢。我不希望列表项被“显示”，我希望它们在一行中从上面“输入”，如果这样做有意义的话。类与id之间的关系不是一个真正的问题（尽管你可能是对的，我应该在我的JSFIDLE中使用类）。如果你看一下，你会看到它实际上是什么样子的，类/id和类似的东西并不是一个真正的问题，这只是列表向下的方式（当它卷起时显示在父div的上方）。好的……那么带slidetoggle的动画对你有用吗？不。比较在我的JSFIDLE（或网站）上使用slidetoggle（）和animate（）退出项目的方式。
.popouter{display:none}

$('.toggle').click(function(){
      var $div = $(this).next('.popouter').slideToggle();
      $(".popouter").not($div).hide();   
});