从底部拉出/向上滑动div？

Posted 2023-05-08

【中文标题】从底部拉出/向上滑动div？

【英文标题】：Pull out / slide up div from bottom?

【发布时间】：2015-10-04 05:41:08

【问题描述】：

当您单击链接/图像时，我希望某种“聊天”窗口从底部向上滑动。我自己先尝试过，但我无法弄清楚。 在这里和其他网站上进行了一些搜索......但显然我不太擅长这个。

我也看过这个，但我无法让它为我工作：Pull out a div from the bottom

Here 是我目前所拥有的：

<div id="wrapper">
<div id="onlinehulp">
    <div id="clickme"><img src="http://i.imgur.com/hv3Rkf8.png">
        </div>
        <div id="contact-online">
        </div>
</div>

$( "#clickme" ).click(function() 
$( "#contact-online" ).slideToggle( "slow", function() 
    // Animation complete.
);
$('#onlinehulp').animate(bottom: '218px', 'slow');
);

我让它工作了，所以当我们单击图像时窗口会向上滑动，但是当我们再次单击图像时它不会向下滑动，即使实际窗口确实消失并向后滑动。

谁能把我推向正确的方向？

【问题讨论】：

查看此链接“***.com/questions/17316156/…”

【参考方案1】：

要向上滑动，您需要动画回到底部：0px。要知道弹出窗口是否打开，您可以使用一个类：

$( "#clickme" ).click(function() 
    $( "#contact-online" ).slideToggle( "slow", function() 

    );

    if ($('#onlinehulp').hasClass('open')) 
        //close it
        $('#onlinehulp').animate(bottom: '0px', 'slow', function() 
            $('#onlinehulp').removeClass('open'); 
        );
     else 
        // open it
        $('#onlinehulp').animate(bottom: '218px', 'slow', function() 
            $('#onlinehulp').addClass('open');
        );
    
);

【讨论】：

我是否还必须更改 html 和/或 CSS 中的任何内容，添加一个具有魔力的“开放”类？现在根本不会动。抱歉，这基本上是我第一次使用 jquery。

不，该类只是您的 javascript 程序知道 onlinehulp div 是否可见的标志

有一个小的语法错误，我编辑了它。请在发布前检查语法。没有它，这是正确的答案。忽略我发布的一个..

【参考方案2】：

$( "#clickme" ).click(function() 
    $( "#contact-online" ).slideToggle( "slow");
    if($(this).hasClass('hide'))
        $('#onlinehulp').animate(bottom: '0px', 'slow');
        $(this).removeClass('hide').addClass('show');
     else 
        $('#onlinehulp').animate(bottom: '218px', 'slow');
        $(this).removeClass('show').addClass('hide');
    
);

更新Fiddle。

【讨论】：

谢谢！像魅力一样工作。

@Jelmer Jasper 的回答是正确的。它更有用。有一个小的语法错误。

@Jelmer 如果它有效，那么您应该感谢投票的努力，因为他应得的，它可能会帮助未来的用户寻找相同的结果