Question

我目前有一个按钮，单击该按钮将显示2个表单链接。当您单击其中一个表单链接时，应显示另一个表单。但是由于某种原因，我无法显示第二个表格；当我单击第二个表单链接时，它要么关闭第一个表单，要么打开第一个表单。

为什么我的表格不起作用？这是示例代码。

 $("#formButton1").click(function () {
      $("#form1").toggle();
      $("#form2").toggle();
 });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
 <button type="button" class="btn btn-primary" id="formButton1" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"></button>
 <form id="form1" method="post" style="display:none;">
      <div class="card">
           <div class="card-header" role="tab" id="headingTwo">
                <h5 class="mb-0">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                          Vault Status
                     </a>
                </h5>
           </div>
           <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="card-block">
                     <div class="form-group">
                          <div class="form-group">
                              <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                          </div>
                          <label for="exampleFormControlSelect2">Select Environment</label>
                          <select multiple class="form-control" id="test1">
                               <option>RTP Prod</option>
                               <option>OMA Prod</option>
                               <option>BGI</option>
                               <option>BG2</option>
                               <option>Cloud</option>
                               <option>Workstation</option>
                               <option>QA</option>
                               <option></option>
                          </select><br />
                          <button type="submit">Submit</button>
                     </div>
                </div>
           </div>
      </div>
 </form>

 <form id="form2" method="post" style="display:none;">
      <div class="card">
           <div class="card-header" role="tab" id="headingTwo">
                <h5 class="mb-0">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                          Form 2
                     </a>
                </h5>
           </div>
           <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
           <div class="card-block">
                <div class="form-group">
                     <div class="form-group">
                         <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                     </div>
                     <label for="exampleFormControlSelect2">Select Environment</label>
                     <select multiple class="form-control" id="test2">
                          <option>Test</option>
                          <option>OMA Prod</option>
                          <option>BGI</option>
                          <option>BG2</option>
                          <option>Cloud</option>
                          <option>Workstation</option>
                          <option>QA</option>
                          <option></option>
                     </select><br />
                     <button type="submit">Submit</button>
                     </div>
                </div>
           </div>
      </div>
 </form>

Answer 1

您错过了代码中对Bootstrap库的引用。确保同时包含引导CSS和javascript：

您需要更改form1的div的ID，我将其重命名为collapseOne

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

$("#formButton1").click(function () {
      $("#form1").toggle();
      $("#form2").toggle();

    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <button type="button" class="btn btn-primary" id="formButton1" 
        style="background-color:#EEEEEE; border-color:darkgrey; color:black;"> 
        </button>
            
            
            <form id="form1" method="post" style="display:none;">
                <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                        <h5 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="font-size:15px;">
                                Vault Status
                            </a>
                        </h5>
                    </div>
                    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="card-block">
                            <div class="form-group">
                                <div class="form-group">

                                    <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                                </div>
                                <label for="exampleFormControlSelect2">Select Environment</label>
                                <select multiple class="form-control" id="test1">
                                    <option>RTP Prod</option>
                                    <option>OMA Prod</option>
                                    <option>BGI</option>
                                    <option>BG2</option>
                                    <option>Cloud</option>
                                    <option>Workstation</option>
                                    <option>QA</option>
                                    <option></option>
                                </select><br />
                                <button type="submit">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <form id="form2" method="post" style="display:none;">
                <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                        <h5 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                                Form 2
                            </a>
                        </h5>
                    </div>
                    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="card-block">
                            <div class="form-group">
                                <div class="form-group">

                                    <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                                </div>
                                <label for="exampleFormControlSelect2">Select Environment</label>
                                <select multiple class="form-control" id="test2">
                                    <option>Test</option>
                                    <option>OMA Prod</option>
                                    <option>BGI</option>
                                    <option>BG2</option>
                                    <option>Cloud</option>
                                    <option>Workstation</option>
                                    <option>QA</option>
                                    <option></option>
                                </select><br />
                                <button type="submit">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

为什么我的表格不起作用？

1 个答案: