我有一个页面,其中包含多个相同的隐藏表单,每个表单都包含在一个单独的隐藏DIV中：
HTML：
<div class="product-intro-text">Some text....
<div class="rfq-button"><a class="advantage-button" id="Adapters" href="#">Request a Quote</a></div>
<div class="inline-rfq">
<form class="contact" name="contact" action="#" method="post">...</form>
</div>
</div>
<div class="h-sep"></div>
<div class="product-intro-text">Some text....
<div class="rfq-button"><a class="advantage-button" id="Auger Equipment" href="#">Request a Quote</a></div>
<div class="inline-rfq">
<form class="contact" name="contact" action="#" method="post">...</form>
</div>
</div>
而不是拥有所有这些相同的隐藏DIV,如何重新定位.inline-RFQ DIV以显示在单击的相应.rfq按钮下方？这适用于移动网站,因此解决方案必须适合移动设备.
我已经在页面的其余部分使用了JS / JQuery,这里是揭示隐藏DIV的JS：
jQuery(document).ready(function($){
/* toggle form */
$(".rfq-button").on("click",function(){
$(this).next().slideToggle();
$(".inline-rfq").next().toggleClass("display");
});
});
感谢您的帮助.
解决方法
这是一个小提琴：
http://jsfiddle.net/psyon001/ejdgX/
您可能想要添加的一件事是在新部分下显示时重置表单状态.
您可能想要添加的一件事是在新部分下显示时重置表单状态.
jQuery(document).ready(function($) { /* toggle form */
$(".rfq-button").on("click",function() {
var $thisParent = $(this).closest('.product-intro-text'),$form = $(".inline-rfq");
if ($thisParent.find('.inline-rfq').length) {
$form.slideToggle();
} else {
$form.slideUp(function() {
$form.appendTo($thisParent).slideDown();
});
}
});
});
