php - 如何 jQuery toggle() 和隐藏切换链接或按钮？

标签 php jquery css

我正在使用 PHP session 在页面上提供特定表单，并且需要在“显示表单”链接和表单之间切换。我使用 jQuery toggle() 进行了这项工作，但我不知道如何防止“显示表单”链接在两种切换状态下显示。

我在 toggle() 之后尝试了 jQuery hide()，但这让一切都消失了，我尝试使用 CSS visibility: 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，因为它没有修复持久的“contact form”链接，即使在隐藏表单时也会留下难看的背景色框但未能隐藏链接。

... ...

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

仍然存在无法使“Contact Form”字样在加载表单时消失或无法用其他内容替换字样的问题，但看起来它是不可能做到这一点，因为联系表单链接(在本例中)是切换点，因此必须在所有切换状态下保持不变。

最佳答案

您现在只切换一个元素，给定此格式:$(toggled-element).toggle();。您需要像这样切换这两个元素:

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

如果您最初想要显示链接并隐藏表单，您可以使用 display: none; 的 css 隐藏表单，或者在脚本的 html 顶部使用 $ ('#showForm').hide();.所以总的结果应该是这样的:

$("#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 用例请求。澄清发生在对我的回答的评论中。

关于php - 如何 jQuery toggle() 和隐藏切换链接或按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56296591/

上一篇：css - 如何为按钮而不是方形制作圆形渐变边框？

下一篇：html - 在锚定图像中使用 border-radius 时造成混淆

相关文章：

java - 使用 PHP 和 MySQL 的登录和注册显示 html 标签作为响应

php - 选择其中日期 = 当前日期

jquery - 网站组件未在 Mozilla 和 Opera 中呈现

Jquery mobile listview - 检查初始化是否完成

jquery - HTML 下拉菜单不需要的间距

php - 使用 PHP 缩放图像并保持纵横比

javascript - 如何将 div 标签附加到 SVG 矩形元素中？

html - Div 没有填满页面

css - 如何在 laravel Blade 语法按钮中添加内联 css？

php - 如何将维基百科添加到 wordpress 插件中

©2024 IT工具网  联系我们