jquery - 反馈表单slideIn从底部开始，位置为:绝对

我想从页面底部以“绝对”位置打开反馈表单。

问题是div进入可见页面下方并创建了一个滚动条。
有没有一种方法可以使它在屏幕边框下移动而不会做同样的事情？

同样，单击反馈后，它应该更改为“关闭”以关闭它并从头开始重新启动。

这是我的代码：

 <div id="feedback">
    <div id="feedback_slide">Feedback</div>
    <div id="contents">
content here
    </div>
</div>

   $(document).ready(function() {
    $('#feedback').click(function(){
        $(this).stop().animate({ bottom: 0 }, 350);
    });

    //change 'feedback' to 'close'

    $('#feedback_slide').click(function(){
        $('#feedback').stop().animate({ bottom: -280 }, 350);
    });
});

这是我的Fiddle

我怎样才能做到这一点 ？

最佳答案

有一种更简单的方法可以做到这一点。

1.您的职位应该“固定”，而不是“绝对”

当您绝对放置某物时，它实际上会将该点放置在页面中，这不是您想要的。固定它的位置，它将随页面滚动。

2.使用.toggleClass()

处理打开和关闭的样式，然后仅使用过渡持续时间移动反馈小部件：

JS：

$(document).ready(function() {
    $('#feedback').click(function(){
        $(this).toggleClass("open");
    });
});

CSS：

#feedback {
    position: fixed;
    bottom: -280px;
    width: 400px;
    height: 300px;
    background-color: #eee;

    -webkit-transition-duration: 0.35s;
    -moz-transition-duration: 0.35s;
    -ms-transition-duration: 0.35s;
    -o-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

#feedback.open
{
    bottom: 0px;
}

JSFiddle



请注意，当单击#feedback的任何部分时，将切换它。

如果只希望#feedback_slide触发事件，请在此绑定事件并调用.parent("#feedback").toggleClass()：

JSFiddle



编辑：

如果要基于父级的当前类将文本从“反馈”更改为“关闭”，则可以在.html()函数内执行三元检查，如下所示：

$(this).html(($(this).parent("#feedback").hasClass("open") ? "Feedback" : "Close")).parent("#feedback").toggleClass("open");

我将在这里将其分解为几个部分：

$(this).html(
    ($(this).parent("#feedback").hasClass("open") ? "Feedback" : "Close")
).parent("#feedback").toggleClass("open");

因此，如果父#feedback具有类.open，则它将文本更改为“ Feedback”，但如果不是，则将其更改为“ Close”。

JSFiddle



编辑：

如果有人将其作为参考，这是最后的小提琴，实现时其高度会随着单击反馈和隐藏溢出而增加：

JSFiddle

关于jquery - 反馈表单slideIn从底部开始，位置为:绝对，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22925346/