Php 如何使用jQuery toggle（）和隐藏切换链接或按钮？

我使用PHP会话在页面上提供特定表单，需要在“ShowForm”链接和表单之间切换。我使用jQuery toggle（）实现了这一点，但我不知道如何防止“show form”链接在两种切换状态下显示

我在toggle（）之后尝试了jQuery hide（），但这使所有内容都消失了，我还尝试使用CSS visibility:hidden（这也导致了所有内容，包括PHP内容，都消失了）

。。。

多亏了格兰特·诺伊，这几乎可以奏效了。有了上面的代码，一切都完美地工作了…除了点击表单会导致它消失。格兰特已经修改了代码（再次感谢）；但修订后的代码在解决表单消失问题的同时，在两种切换状态下都有一个可见的“联系人表单”链接，并首先加载表单，而不是链接。后者应易于修复；但是我不知道如何显示联系人表单链接或表单，不是在两种切换状态下都显示

使用格兰特修订的代码时，代码如下：

<div id="togLink">
<?php echo $JQclick; ?>
</div>

<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>

<script>
$("#togLink").click(function() {
  $("#showForm").toggle();
  $("#contactForm").toggle();
});
</script>


@font-face {
    font-family: 'blair_capsregular';
    src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
         url('../typefaces/blair_caps-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#ExBox {
    width: 600px;
    margin: 50px auto 0 auto;
    text-align: justify;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
}

.titleBar {
    width:100%;
}

.Tbox {
    float:left; height:25px;
    text-align: center;
    font-size: 15px;
    font-family: 'blair_capsregular';
}

#box {
    border: 2px solid blue;
    margin: 0;
    position: static;
    padding: 0 2px 0 2px;
    text-decoration: none;
}

#box a:link {
    color: orange;
    text-decoration: none;
}

#box a:visited {
    color: orange;
    text-decoration: none;
}

.Tbox:nth-child(1) {
    width:33.3%;
}

.Tbox:nth-child(2) {
    width:33.3%;
}

.Tbox:nth-child(3) {
    width:33.3%;
}

.clearRed {
    clear: both;
    color: red;
}

.Tbox a:link {
    color: black;
    text-decoration: none;
}

.Tbox a:visited {
    color: black;
    text-decoration: none;
}

.Tbox a:hover {
    color: red;
    text-decoration: none;
}

.Tbox a:active {
    color: hotpink;
    text-decoration: none;
}

.Tbox a:focus {
    color: hotpink;
    text-decoration: none;
}





/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #9b9b9b;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #9b9b9b;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #9b9b9b;
}

textarea::placeholder { color: #9b9b9b; font-family: arial; }

/* Colors for focused fields */

input[type=text], input[type=email], textarea {
  outline: none;
  border: 1px solid #9b9b9b;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus {
  border: 1px solid #00C5BE;
}

/* Input styling */

textarea {
   font-family: arial;
   width: 27rem;
   font-size: 1rem;
   padding: 0.6rem;
   margin-right: 0.5rem;
   margin-left: 0.5rem;
   border-radius: 5px;
   border: 1px solid #9b9b9b;
   color: #9b9b9b !important;
}

.contact-form-div input {
   display: block;
   font-size: 1rem;
   width: 27rem;
   padding: 0.6rem;
   margin: 0.5rem;
   border-radius: 5px;
   border: 1px solid #9b9b9b;
   color: #9b9b9b !important;
}

.contact-form-div input[type=submit] {
   width: auto;
   background-color: #00C5BE;
   border: none;
   color: #fff !important;
   font-size: 1em;
   padding: 10px 50px;
   text-transform: uppercase;
   font-weight: normal;
}

/* Hide the fake field */
#m66 {
   display: none;
}


/* VERTICAL SLIDER */


* { margin:0; padding:0; }
a { text-decoration: none; }  

.expand {
  background: #fff;
  overflow: hidden;
  color: #000;   
  line-height: 50px;

  transition: all .5s ease-in-out;
  height: 0;
 }

 .expand:target {
  height: 50px;
}

.close {
    max-height: 0;
}

/* JQUERY TESTING */

.box{
    display:none;
}

#togLink {
  color: blue;
  cursor: pointer;
}

#togLink:hover {
  text-decoration: underline;
}

#showForm,
#contactForm {
  width: 425px;
  height: 550px;
}

#showForm {
  background-color: #DDD;
}

#contactForm {
  background-color: #AAA;
  display: none;
}

$（“#togLink”）。单击（函数（）{
$（“#showForm”）.toggle（）；
$（“#contactForm”）.toggle（）；
});
@字体{
字体系列：“blair_capsregular”；
src:url（'...types/blair_caps-webfont.woff2'）格式（'woff2'），
url（'../typefaces/blair_caps-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
#ExBox{
宽度：600px；
保证金：50px自动0自动；
文本对齐：对齐；
字体系列：verdana、arial、无衬线字体；
字体大小：11px；
线高：1.6；
}
titleBar先生{
宽度：100%；
}
.Tbox{
浮动：左侧；高度：25px；
文本对齐：居中；
字体大小：15px；
字体系列：“blair_capsregular”；
}
#盒子{
边框：2件纯蓝；
保证金：0；
位置：静态；
填充：0 2px 0 2px；
文字装饰：无；
}
#方框a：链接{
颜色：橙色；
文字装饰：无；
}
#方框a：参观{
颜色：橙色；
文字装饰：无；
}
.Tbox:n个孩子（1）{
宽度：33.3%；
}
.Tbox:n个孩子（2）{
宽度：33.3%；
}
.Tbox:n个孩子（3）{
宽度：33.3%；
}
克利雷德先生{
明确：两者皆有；
颜色：红色；
}
.Tbox a:链接{
颜色：黑色；
文字装饰：无；
}
.Tbox a:参观{
颜色：黑色；
文字装饰：无；
}
.Tbox a:悬停{
颜色：红色；
文字装饰：无；
}
.Tbox a：激活{
颜色：粉红；
文字装饰：无；
}
.Tbox a：焦点{
颜色：粉红；
文字装饰：无；
}
/*表单CSS-占位符颜色*/
：-webkit输入占位符{/*webkit，闪烁，边缘*/
颜色：#9b9b9b；
}
：-moz占位符{/*Mozilla Firefox 4到18*/
颜色：#9b9b9b；
不透明度：1；
}
：-moz占位符{/*Mozilla Firefox 19+*/
颜色：#9b9b9b；
不透明度：1；
}
：-ms输入占位符{/*Internet Explorer 10-11*/
颜色：#9b9b9b；
}
：-ms输入占位符{/*Microsoft Edge*/
颜色：#9b9b9b；
}
text区域：：占位符{颜色：#9b9b9b；字体系列：arial；}
/*聚焦场的颜色*/
输入[类型=文本]，输入[类型=电子邮件]，文本区域{
大纲：无；
边框：1px实心#9b9b；
}
输入[类型=文本]：焦点，输入[类型=电子邮件]：焦点，文本区域：焦点{
边框：1px实心#00C5BE；
}
/*输入样式*/
文本区{
字体系列：arial；
宽度：27雷姆；
字号：1rem；
填充：0.6rem；
保证金权利：0.5雷姆；
左边距：0.5雷姆；
边界半径：5px；
边框：1px实心#9b9b；
颜色：#9b9b9b！重要；
}
.联络表格分区输入{
显示：块；
字号：1rem；
宽度：27雷姆；
填充：0.6rem；
保证金：0.5雷姆；
边界半径：5px；
边框：1px实心#9b9b；
颜色：#9b9b9b！重要；
}
.联系表格部门输入[类型=提交]{
宽度：自动；
背景色：#00C5BE；
边界：无；
颜色：#fff！重要；
字号：1em；
填充：10px 50px；
文本转换：大写；
字体大小：正常；
}
/*隐藏假场*/
#m66{
显示：无；
}
/*垂直滑块*/
*{边距：0；填充：0；}
a{文本装饰：无；}
.扩大{
背景：#fff；
溢出：隐藏；
颜色：#000；
线高：50px；
过渡：全部。5s轻松进出；
身高：0；
}
.扩展：目标{
高度：50px；
}
.结束{
最大高度：0；
}
/*JQUERY测试*/
.盒子{
显示：无；
}
#togLink{
颜色：蓝色；
光标：指针；
}
#togLink:悬停{
文字装饰：下划线；
}
#展示形式，
#联系方式{
宽度：425px；
高度：550px；
}
#展示形式{
背景色：#DDD；
}
#联系方式{
背景色：#AAA；
显示：无；
}

我没有将contactForm添加到HTML端，因为它不会修复持久的“contactForm”链接，即使在隐藏表单但未能隐藏链接时，也会留下一个丑陋的背景色框

。。。

2019年5月26日：关于rg88[]的回复，这就是最终奏效的原因：

<a id="togLink" href="#"><?php echo $formClick; ?></a>
<div id="togForm"><?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>

<script>
$( "#togLink" ).on( "click", function() {
  $('#togForm').toggle();
});

</script>
#togForm {
  display: none;
}

$（“#togLink”）。在（“单击”，函数（）{
$（'#togForm'）。toggle（）；
});
#服装{
显示：无；
}

---

在加载表单时，仍然存在无法使“联系人表单”一词消失的问题，或者无法用其他内容替换该词的问题，但似乎不可能做到这一点，因为联系人表单链接（在本例中）是切换点，因此在所有切换状态下必须保持不变。

您现在只切换一个元素，给定以下格式：

$（切换元素）。toggle（）。您需要像这样切换这两个元素：

$('#togLink').click(function(){
  $('#showForm').toggle();
  $('#contactForm').toggle();
});

如果您最初希望显示链接并隐藏表单，可以使用css隐藏表单，方法是
display:none，或在脚本的html顶部，使用
$（'#showForm'）.hide（）。所以总的结果是这样的：

$('#togLink').click(function(){
  $('#showForm').toggle();
  $('#contactForm').toggle();
});


$（“#togLink”）。单击（函数（）{
$（“#showForm”）.toggle（）；
$（“#联系方式”）。
$('#togLink').click(function(){
  $('#showForm').toggle();
  $('#contactForm').toggle();
});

<div id="togLink">foo
<?php echo $JQclick; ?>
</div>

<div id="showForm">bar
<span>glorp<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?></span>
</div>

span {
  display: none;
}

$('#togLink').click(function(){
  console.log('click');
  $('#showForm').not('span').toggle();
});