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,因为您一开始只想显示一个。

所以你会看到

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

这样一来,第二种形式就被隐藏了。当然,你也可以在类css样式中添加“display:none”。

这是你想要的吗?

于 2013-03-27T07:38:15.847 回答