在我的网站上（http://jfkewrtaxi.com/#pricing）我正在使用预订表格。
对于我的预订表格，我想添加按钮或触发器，一旦在其中一个下拉菜单中按下，就会出现另一个表格。
我遇到的问题是按钮/切换触发器没有出现在表单上，表单已经打开，没有客户或访客按下按钮（这是不存在的）。
我该怎么做才能解决这个问题？
我需要显示按钮，以便客户填写单独的表格！
这是我用过的jsfiddle：
的JavaScript
<script>
$(document).ready(function(){
$("#form1-control").click(function(){
$("#form1").toggle();
$("#form2").hide();
$("#form3").hide();
});
$("#form2-control").click(function(){
$("#form1").hide();
$("#form2").toggle();
$("#form3").hide();
});
$("#form3-control").click(function(){
$("#form1").hide();
$("#form2").hide();
$("#form3").toggle();
});
});
</script>
HTML CODE
<div id=nav>
<ul>
<ul>
<label id=form1-control>Address</label>
</ul>
<ul>
<label id=form2-control>Airport</label>
</ul>
<ul>
<label id=form3-control>Landmark/Hotel</label>
</ul>
</ul>
</div>
<div id=forms>
<div id=form1>
<form method=post action="">
<label>Street Address:</label>
<input type=text name=name>
<tr>
<p>
<td class="width:110px; height:15px">
<label>City:
<input type=text id=city name=city>
</td>
<td class="width:70px; height:15px">
<p>
<label>State:
<input type="text" id="state" name="state">
</td>
<td>
<p>
<label>Zip Code:
<input type="text" id="zip" name="zip">
</p>
</td>
</tr>
<tr>
</td>
</tr>
</table>
</p>
<p>
<label>Date <span class=""> * </span>
</label>
<input type="text" id="calendar" name="calendar" style="height:25px" />
</p>
<p>
<label>Time</label>
<select id="time" name="time" style="height:25px; width:55px">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select id="time2" name="time2" style="height:25px; width:55px">
<option selected="">--</option>
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>48</option>
<option>49</option>
<option>50</option>
<option>51</option>
<option>52</option>
<option>53</option>
<option>54</option>
<option>55</option>
<option>56</option>
<option>57</option>
<option>58</option>
<option>59</option>
</select>
<select id="time3" name="time3" style="height:25px; width:55px">
<option selected="">--</option>
<option>AM</option>
<option>PM</option>
</select>
</p>
<p>
<table align="center">
<tr>
<td class="width:110px;">
<label style="font-size:13px">Passenger #: <span class='error'></span>
</label>
<td class="width30">
<input type="number" id="passengers" name="passengers" style="width:50px;margin:3px">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:13px">Luggage #:</label>
<td class="width30">
<input type="number" id="luggages" name="luggages" style="width:50px; margin:3px">
</td>
</td>
<td class="width:50px;" colspan="2">
<label style="font-size:13px">Car Seat:</label>
</td>
<td class="width30">
<input type="number" id="seat" name="seat" style="width:50px; margin:3px">
</td>
</tr>
<tr>
<td>
</tr>
</td>
</table>
</form>
</div>
<div id=form2>
<form method=post action="">
<td class="width:110px; height:15px">
<label style="font-size:13px">Airport Name: <span class='error'></span>
</label>
<td class="width30">
<input type="text" id="airport" name="airport" class="input85" style="width:110px; margin:10px" value="" />
</td>
</td>
<td class="width:70px">
<label style="font-size:13px">Airline/Code:</label>
<td class="width30">
<input type="text" id="airline" name="airline" class="input85" style="width:60px; margin:10px" value="" />
</td>
</td>
<td class="width:50px" colspan="2">
<label style="font-size:13px">Flight #:</label>
</td>
<td class="width:30">
<input type="text" id="fnumber" name="fnumber" class="input85" style="width:40px;margin:10px" value="" />
</td>
</tr>
<tr>
</td>
</tr>
</table>
<table align="center">
<tr>
<td class="width:110px;">
<label style="font-size:13px">Passenger #: <span class='error'></span>
</label>
<td class="width30">
<input type="number" id="passengers" name="passengers" style="width:50px;margin:3px">
</td>
</td>
<td class="width:70px;">
<label style="font-size:13px">Luggage #:</label>
<td class="width30">
<input type="number" id="luggages" name="luggages" style="width:50px; margin:3px">
</td>
</td>
<td class="width:50px;" colspan="2">
<label style="font-size:13px">Car Seat:</label>
</td>
<td class="width30">
<input type="number" id="seat" name="seat" style="width:50px; margin:3px">
</td>
</tr>
<tr>
<td>
</tr>
</td>
</table>
</form>
</div>
<div id=form3>
<form method=post action="">
<label>Full Address:</label>
<input type=text name=name style=width:280px>
</form>
</div>
</div>
CSS代码
#nav {
width:320px;
margin-left:auto;
margin-right:auto;
}
#nav ul {
display:inline-block;
list-style:none;
margin:0px;
padding:5px;
}
#nav label {
padding:4px;
font: bold 14px Trebuchet MS, Arial, Helvetica;
padding-left:10px;
padding-right:10px;
height:25px;
text-decoration:none;
color:white;
cursor:pointer;
background-color:grey;
-webkit-border-radius: .4em;
-khtml-border-radius: .4em;
-moz-border-radius: .4em;
border-radius: .4em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
#forms {
width:300px;
height:100px;
margin-left:auto;
margin-right:auto;
font: bold 14px Trebuchet MS, Arial, Helvetica;
}
#forms input[type=text] {
border:1px solid #ccc;
height:25px;
-webkit-border-radius: .4em;
-khtml-border-radius: .4em;
-moz-border-radius: .4em;
border-radius: .4em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
#forms input[type=submit] {
border:1px solid #ccc;
height:28px;
background-color:black;
color:#FFF;
-webkit-border-radius: .4em;
-khtml-border-radius: .4em;
-moz-border-radius: .4em;
border-radius: .4em;
cursor:pointer;
}