好的,这可能有点棘手,但我相信这是可行的。我有两个按钮,我想用它们触发两个表单,最初用户会看到两个按钮和下面的一个表单,当他们单击另一个按钮时,会滑入一个比第一个大一点的不同表单并展开 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);
});
});