Question

我有一个固定的标题，上面隐藏了一个联系表单。目标是在单击联系人链接时向下滑动表单，然后在单击关闭按钮时向上滑动。

现在我的代码检查身体是否有一个formUp类。如果表单已启动，则会触发向下滑动动画并将类更改为formDown。不幸的是，如果再次点击联系人链接，它会向下滑动更多，关闭按钮不起作用。

我真的希望用户有三种方法来关闭表单。

1）单击表单中的关闭按钮。

2）再次点击联系人链接，然后

3）单击表单外的任何位置以关闭。

我是一名学生，对js来说还是比较新的。如果有人可以帮助我，我将不胜感激。这是一个带有示例代码的codepen链接...... http://codepen.io/anon/pen/AljKi 谢谢！

Answer 1

这些线......

$formDown = $('body').hasClass('formDown');
$formUp = $('body').hasClass('formUp');

...仅在脚本的开头执行，因此formDown始终为false，并且form up始终为true。

只需this。

Answer 2

试试这个：

$(function () {
    $('.contactLink').on('click', function () {
        $('.contactLink').addClass('clicked'); // to stop the multiple clicks
        if ($('.contactLink').hasClass('clicked') && $('body').hasClass('formUp')) {
            $('.fixedHeader').animate({
                "top": "+=238px"
            }, 300);
            $('body').removeClass('formUp').addClass('formDown');
        }
    });

    $('.closeForm').on('click', function (e) {
        e.preventDefault();
        if ($('body').hasClass('formDown')) {
            $('.fixedHeader').animate({
                "top": "-=238px"
            }, 300);
            $('body').removeClass('formDown').addClass('formUp');
        }
        $('.contactLink').removeClass('clicked')
    });
});

在你的代码中，由于这两个缓存变量，它无法正常工作：

$formDown = $('body').hasClass('formDown');
$formUp = $('body').hasClass('formUp');

其中一个是真的而另一个是假的。

动画固定标题以在点击时向下滑动

2 个答案: