javascript - 如何使 "roll-up curtain"样式的下拉菜单在卷起时不会在其父项上方弹出

Question

我正在尝试制作一个包含未知数量元素的列表，当它悬停在 div 上方时，它会从下面动画出来，这样列表看起来像是被下拉而不是调整大小。 (jquery slideDown() 和 slideToggle() 函数很好地完成了“下拉”版本，但我希望列表项能够下降，就像你在卷帘上写字并把它卷下来一样。)

列表、div 或表格无关紧要；只要它看起来像我想要的。

Here's一个 jsfiddle，其中包含我尝试过的要点。如在 real application ，唯一的问题是，当它处于向上滚动的位置时，(有时)它会高于父 div 并显示在其上方。

在下面的代码中(来自 jsfiddle)，我希望 #popouter 仅在它低于 #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

我希望有一种方法可以让列表项“ float ”下来，并且只是 animate() 到列表的高度，直到所有元素(从最顶部开始)由于以下原因弹出溢出:隐藏，但是doesn't seem to be possible无需给元素 position:absolute 从而使它们出现在列表底部的彼此之上。

通常，我只是 Jquery-brute-force div 在父 div 下面向上滚动一段时间后消失，但在这种情况下，我也有 list-div，在这种情况下，需要部分(隐藏在顶部)随着它的上升。

有人对如何使这项工作有任何想法吗？也许我现在只是陷入困境而没有看到明显的答案。

谢谢!

Answer 1

试试这段代码

DEMO

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