反馈表单slideIn从底部开始，位置为：absolute

Question

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

问题是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

我该怎么做？

Answer 1

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

1。你的位置应该是＆＃34;固定＆＃34;而不是＆＃34;绝对＆＃34;

当你绝对定位某些东西时，它实际上会将它放在页面中，这不是你想要的。定位它固定，它将与页面一起滚动。

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，则会将文本更改为＆＃34;反馈＆＃34;，但如果没有，则会将其更改为＆＃34;关闭＆ ＃34;

JSFiddle

---

编辑：

如果有人看这个作为参考，这里是最后的小提琴，实现的高度在点击反馈并且隐藏溢出时会增加：

JSFiddle