jquery - 根据点击位置重新定位 div

Question

我有一个包含多个相同隐藏表单的页面，每个表单都包含在一个单独的隐藏 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&nbsp;Equipment" href="#">Request a Quote</a></div>
    <div class="inline-rfq">
            <form class="contact" name="contact" action="#" method="post">...</form>
    </div>
</div>

我如何才能重新定位 .inline-RFQ DIV，使其出现在被单击的相应 .rfq 按钮下方，而不是拥有所有这些相同的隐藏 DIV？这是针对移动网站的，因此解决方案必须适合移动设备。

我已经在页面的其余部分使用了 JS/JQuery，这里是显示隐藏 DIV 的 JS:

   jQuery(document).ready(function($){
/* toggle form */
$(".rfq-button").on("click", function(){
    $(this).next().slideToggle();
    $(".inline-rfq").next().toggleClass("display");
});
});

提前感谢您的帮助。

Answer 1

这是一个 fiddle :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();
            });
        }
    });
});​