我正在编写一个网页,其中有三种形式用于隐藏在div中的相应问题 - 我在bootstrap的框架中使用了一个简单的.accordion-toggle来实现此功能。
表单会有一个提交按钮来发布表单,还有取消链接 - 取消链接应该触发表单崩溃(使用bootstrap .collapse),同时'问一个问题'按钮应该重新出现。
我能够使用jQuery中的show()和hide()方法使其工作。但是,如果在同一页面上有三个取消按钮,我不确定如何为每个链接附加唯一标识符以正确折叠正确的div。
下面的小提琴是迄今为止最接近的解决方案。
See @DanielAlmeida Fiddle
https://jsfiddle.net/ek57ao0y/
<div class='form form0'>
<ul>
<li><a href="#" class='showForm' data-target='.form1'>Show form 1</a></li>
<li><a href="#" class='showForm' data-target='.form2'>Show form 2</a></li>
<li><a href="#" class='showForm' data-target='.form3'>Show form 3</a></li>
<li><a href="#" class='showForm' data-target='.form4'>Show form 4</a></li>
</ul>
</div>
<div class='form form1'>
<h3>Form 1</h3>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<p>
<a href="#" class='cancel' data-target='.form0'>Cancel</a>
</p>
</div>
<div class='form form2'>
<h3>Form 2</h3>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<p>
<a href="#" class='cancel' data-target='.form0'>Cancel</a>
</p>
</div>
<div class='form form3'>
<h3>Form 3</h3>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<p>
<a href="#" class='cancel' data-target='.form0'>Cancel</a>
</p>
</div>
<div class='form form4'>
<h3>Form 4</h3>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<p>
<a href="#" class='cancel' data-target='.form0'>Cancel</a>
</p>
</div>
答案 0 :(得分:0)
你可以通过改变一些代码来做到这一点。确保隐藏并显示正确的元素。以下应该为你完成这项工作。
$(function() {
$(".submit-collapse").click(function(){
$(".contact-form").show();
$(".submit-collapse").hide();
});
$(".cancel-link").click(function(){
$(".contact-form").hide();
$(".submit-collapse").show();
})
});
.contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-trigger top-spaced hidden-md hidden-sm hidden-xs">
<div class="panel panel-default no-border">
<div class="panel-heading">
<h4 class="drk-grey">
Have another question? <a class="accordion-toggle collapsed collapsed grn-btn full-window-btn submit-collapse" data-parent="#accordion" data-toggle="collapse" href="#question-about-app-process">Submit Your Question </a>
</h4>
</div>
<form class="contact-form" action="/mailers/faq_contact_us" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="L+9iNJ7+yKMBBIFsSv0nEzet6tit4bfxTaoUNbopARhIzoN/GL3fn40AaY1sV095jddz6fXzs0p20axPIfki+A==" />
<div class="spaced">
<label for="name">Name</label><input type="text" name="name" id="name" class="form-control" required="required" />
</div>
<div class="row spaced">
<div class="col-md-6">
<label for="email">Email</label><input type="email" name="email" id="email" class="form-control" required="required" email="true" />
</div>
<div class="col-md-6">
<label for="primary_phone">Phone</label><input type="tel" name="primary_phone" id="primary_phone" class="form-control" required="required" phone="true" />
</div>
</div>
<div class="spaced">
<label for="message">Message</label><textarea name="message" id="message" class="form-control" required="required" rows="10" maxLength="1000">
</textarea>
</div>
<div class="spaced">
<input type="submit" name="commit" value="Submit Question" class="btn btn-small text-center" /><a class="accordion-toggle collapsed collapsed cancel-link" data-parent="#accordion" data-toggle="collapse" href="#question-about-app-process">Cancel</a>
</div></form>
</div>
答案 1 :(得分:0)
“我不确定如何为每个链接附加唯一标识符以正确折叠正确的div”
您可以使用parent()函数。示例:此代码删除父div中的所有内容...此链接为:
<div>blablabla something <a href='#null' onclick="$(this).parent(\'div\').remove();">Remove</a></div>
在你的事业中,你不会使用“删除”,而是调用colapse功能。