使用Jquery在div中显示表单

Question

所以我用cloud 9做了一个网站。现在，我被困在显示和隐藏我的表单上。我有一个固定的侧边栏与“联系”按钮。按下那个按钮应该会切换到我的div #页面包装器，它将我的表单作为一种弹出窗口显示在您所在站点的屏幕中央。联系人表单链接了一个php脚本，该脚本目前不起作用，但这是另一回事。

我尝试了多种解决方案，但现在我只是迷失了方向。

https://jsfiddle.net/b6uwb4n3/

一段代码

$( "#contactBtn" ).click(function() {
$("#page-wrapper").hide( "slow", function() {
});
});

https://fjord-explorers-raademar.c9users.io/

链接到我的网站

有很多工作正在进行中。

Answer 1

查看链接的站点，您似乎在文档就绪功能之前附加了联系人按钮单击事件。我建议移动代码

$( "#contactBtn" ).click(function() {
    $("#page-wrapper").hide( "slow", function() {
    });
});

添加到$(function(){})调用内部。

Answer 2

您可以使用jQuery的toggleClass()函数，创建一个显示div的类，并将div设置为display: block。请参阅小提琴：https://jsfiddle.net/b6uwb4n3/1/

Answer 3

您可以只使用.toggle()函数：

$( "#contactBtn" ).click(function() {
  $("#page-wrapper").toggle("slow");
});