jquery - 反馈表单从底部滑入，位置为 :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。你的立场应该是“固定的”，而不是“绝对的”

当您绝对定位某些内容时，它实际上会将其放置在页面中的那个位置，这不是您想要的。将其固定并随页面滚动。

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 触发事件，请将其绑定(bind)到此处并调用 .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

---

编辑:

万一有人看这个作为引用，这里是最后的 fiddle ，当反馈被点击和 overflow hidden 时，高度会增加:

JSFiddle