Question

我正在使用PHP会话在页面上提供特定的表单，并且需要在“显示表单”链接和表单之间进行切换。我可以使用jQuery toggle（）进行此操作，但是我无法弄清楚如何防止“显示表单”链接在两种切换状态下显示。

我已经在toggle（）之后尝试了jQuery hide（），但是这使所有内容消失了，并且我尝试使用CSS可见性：hidden（隐藏，这也会导致包括PHP内容在内的所有内容消失）。

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

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

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

$("#togLink").click(function() {
  toggleForm();
});

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

上面的代码有效，但是PHP输出以两种切换状态显示（我知道这是预期的行为）。就像我在上面说的，我需要一种使切换状态为“或”的方式-可点击的链接或形式，而不是两者。有人可以为此提供任何建议吗？

... ...

CSS代码：

@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;
}

#showForm {
  display: none;
}

... ...

感谢Grant Noe，这几乎奏效了。使用上面的代码，一切都可以正常工作...除了单击表单导致其消失之外。此后，格兰特修改了代码（再次感谢）；但是修改后的代码在解决表单消失的问题的同时，在两种切换状态下均具有可见的“ 联系表单”链接，并首先加载表单，而不是链接。后者应该易于修复；但是我不知道如何显示联系表单链接或，而不是同时显示两种切换状态。

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

<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;
}

我还没有在HTML方面添加contactForm，因为它不能修复持久的“ 联系表单”链接，并且即使隐藏表单也留下难看的背景色框但无法隐藏链接。

... ...

2019年5月26日：：参考 rg88 的回复[How do I hide a part of a form and make it visible only on clicking a "Add another" button?] 这终于奏效了：

<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;
}

仍然存在无法在加载表单时使“ 联系表单”一词消失或能够用其他东西替换这些词的问题，但是看起来之所以无法实现，是因为“联系表单”链接（在这种情况下）是切换点，因此必须在所有切换状态下保持不变。

Answer 1

使用以下格式，您现在只切换一个元素：$(toggled-element).toggle();。您需要像这样切换两个元素：

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

如果您最初希望显示链接并隐藏表单，则可以使用display: none;用css隐藏表单，或者使用$('#showForm').hide();用脚本隐藏html顶部的表单。因此总结果将如下所示：

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

#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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="togLink">Toggle Form</div>
<div id="showForm"></div>
<div id="contactForm"></div>

让我知道我是否错过了什么。

更改日志：

我添加了OP中未出现的#contactForm div以适应OP用例请求。在对我的答案的评论中进行了澄清。

Answer 2

将PHP放在HTML元素中可以让您对该元素进行单独控制：

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

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

使用CSS隐藏元素：

span {
  display: none;
}

然后使用.not()避免切换元素：

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

这里是DEMO

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

2 个答案:

更改日志：