使用 Jquery 单击按钮时在 div 内显示表单

Question

所以我正在使用cloud 9 制作一个网站。现在我坚持显示和隐藏我的表格。我有一个带有 "Contact" 按钮的固定边栏。按下该按钮应该切换我的 div #page-wrapper，它包含我的表单作为一种弹出窗口 window 在您站在网站的屏幕中间。联系表格 link 使用 php 脚本编辑，目前无法正常工作，但那是另一回事了。

我已经尝试了多种解决方案，但现在我迷路了。

https://jsfiddle.net/b6uwb4n3/

一段代码

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

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

link 到我的站点

很多工作正在进行中。

Answer 1

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

Answer 2

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

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

Answer 3

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

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

进入 $(function(){}) 调用。

Answer 4

并且如果我希望表单出现在我在页面上的位置，即没有静态位置的表单。或者向下滚动到表单静态所在的位置。我该怎么做？

使用 Jquery 单击按钮时在 div 内显示表单

Show form within a div on buttonclick with Jquery

html

css

jquery

toggle