8

複数の同一の非表示フォームを含むページがあり、それぞれが個別の非表示 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>

これらの同一の隠し DIV をすべて持つ代わりに、.inline-RFQ DIV を再配置して、クリックされた対応する .rfq-button の下に表示するにはどうすればよいですか? これはモバイル サイト用であるため、ソリューションはモバイル フレンドリーである必要があります。

私はすでにページの残りの部分で JS/JQuery を使用しています。非表示の DIV を明らかにする JS は次のとおりです。

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

事前にご協力いただきありがとうございます。

4

1 に答える 1

3

フィドルは次のとおりです。http：//jsfiddle.net/psyon001/ejdgX/ 追加したいことの1つは、新しいセクションの下に表示するときにフォームの状態をリセットすることです。

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();
            });
        }
    });
});​
于 2012-12-19T15:07:34.537 に答える