jquery - 我的小提琴在我的网站上不起作用

Question

在我的网站 ( 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>

代码

  <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;
}

Answer 1

为所有表单添加一个类。

.hide{
    display: none;
}

这是确保表单默认隐藏。

检查小提琴