如何使“卷帘式”样式的下拉菜单在卷起时不会从父菜单上方弹出

How to make a "roll-up curtain"-style drop-down menu not pop out above its parent when rolled up

本文关键字：方弹出 菜单 下拉菜单 何使 卷帘式 样式      更新时间：2023-09-26

我试图使一个列表充满了未知数量的项目动画从一个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
相关文章：