1

これは少しトリッキーかもしれませんが、実行可能であると確信しています。2 つのフォームをトリガーしたい 2 つのボタンがあります。最初は、ユーザーには 2 つのボタンとその下のフォームの 1 つが表示され、他のボタンをクリックすると、最初のフォームよりも少し大きい別のフォームがスライドします。 page/div を展開してそれを含めます。これは私がこれまで持っているHTMLです：

<a href="#" class="msg medlightgreen large-6 columns">send us a message</a> 
<a href="#" class="quote medlightgreen large-6 columns">request free quote</a>  

<div class="msgform">
<form>
    <div class="row">
        <div class="large-4 columns">
        <input type="text" placeholder="name">
        </div>
        <div class="large-4 columns">
        <input type="text" placeholder="phone">
        </div>
        <div class="large-4 columns">
        <input type="text" placeholder="e-mail">
        </div>
    </div>
    <div class="row">
        <div class="large-6 columns">
        <input type="text" placeholder="monthly budget">
        </div>
        <div class="large-6 columns">
        <input type="text" placeholder="timeframe">
        </div>
    </div> 
    <div class="row">
        <div class="large-12 columns">
        <textarea placeholder="message"></textarea>
        </div>
    </div>
</form>
</div>  

<div class="quoteform">
<form>
    <div class="row">
        <div class="large-4 columns">
        <input type="text" placeholder="name">
        </div>
        <div class="large-4 columns">
        <input type="text" placeholder="phone">
        </div>
        <div class="large-4 columns">
        <input type="text" placeholder="e-mail">
        </div>
    </div>
    <div class="row">
        <div class="large-12 columns">
        <textarea placeholder="message"></textarea>
        </div>
    </div>
</form>
</div>

私はJSに以下を追加しようとしましたが、うまくいかないようです:

$(document).ready(function() {
  $('.msg').click(function() {
$(".msgform").slideToggle(200);
  });
  $('.quote').click(function() {
$(".quoteform").slideToggle(200);
  });
 });

ここに画像の説明を入力

4

1 に答える 1

0

これまでのところうまくいっています: jsFiddle を作成しました:

更新された http://jsfiddle.net/h9Zt4/1/

またdisplay:none、最初は 1 つだけを表示したかったので、2 番目のフォームのスタイルを に設定しました。

だからあなたは見るでしょう

<div class="quoteform" style="display: none;">

これは、最初に 2 番目のフォームが非表示になるようにするためです。もちろん、クラスのCSSスタイルに「display:none」を追加することもできます。

これはあなたが望んでいたものですか？

于 2013-03-27T07:38:15.847 に答える