HTML表单和javascript ---在同一个表中显示不同的表单

Question

我在HTML表格中有4个表单,使用4个按钮调用表单.

HTML:

<div id="myAccordion">
  <table id="edit"
         class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail">
    <tbody>
      <tr>
        <td width=50%>
          <button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion"
                  id="cpass"
                  onclick="document.getElementById('col').style.display = 'inline'">form1
          </button>
        </td>
        <td width=50%>
          <button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion"
                  id="cinfo"
                  onclick="document.getElementById('col').style.display = 'inline'">form2
          </button>
        </td>
      </tr>
      <tr>
        <td width=50%>
          <button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion"
                  id="cmail"
                  onclick="document.getElementById('col').style.display = 'inline'">form3
          </button>
        </td>
        <td width=50%>
          <button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion"
                  id="cplace"
                  onclick="document.getElementById('col').style.display = 'inline'">form4
          </button>
        </td>
      <tr>
        <td colspan="2" style="display:none;" id="col">
          <div id="form1" class="collapse">
            <form method="POST" action="updatepassc.php" novalidate="novalidate" id="1">
              <div class="form-group">
                <label for="oldpassword" class="control-label ">1:</label>
                <input type="password" class="form-control" id="oldpassword"
                       name="oldpassword">
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                <label for="newpassword" class="control-label ">2:</label>
                <input type="password" class="form-control" id="newpassword"
                       name="newpassword">
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                <label for="newpassword1" class="control-label ">3:</label>
                <input type="password" class="form-control" id="newpassword1"
                       name="newpassword1">
                <span class="help-block"></span>
              </div>
              <button type="submit" class="btn btn-success btn-block">yes</button>
            </form>
          </div>
          <div id="form2" class="collapse">
            .
            <form method="POST" action="updateinfo.php" novalidate="novalidate">
              <div class="form-group">
                <label for="newinfo" class="control-label ">2</label>
                <textarea class="form-control" rows="3" id="newinfo"
                          name="newinfo">></textarea>
                <span class="help-block"></span>
              </div>
              <button type="submit" class="btn btn-success btn-block">yes</button>
            </form>
          </div>

          <div id="form3" class="collapse">
            .
            <form method="POST" action="updateinfo.php" novalidate="novalidate">
              <div class="form-group">
                <label for="newinfo" class="control-label ">3</label>
                <textarea class="form-control" rows="3" id="newinfo"
                          name="newinfo">></textarea>
                <span class="help-block"></span>
              </div>
              <button type="submit" class="btn btn-success btn-block">3</button>
            </form>
          </div>
          <div id="form4" class="collapse">
            .
            <form method="POST" action="updateinfo.php" novalidate="novalidate">
              <div class="form-group">
                <label for="newinfo" class="control-label ">4</label>
                <textarea class="form-control" rows="3" id="newinfo"
                          name="newinfo"></textarea>
                <span class="help-block"></span>
              </div>
              <button type="submit" class="btn btn-success btn-block">yes</button>
            </form>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我想在(td id ="col")中显示不同的形式,但它有一个错误,它将同时显示两个表格.我想如果我点击一个按钮,1个表格将打开,其他表格将关闭.例如,如果表单1打开,表单2,3,4将关闭

这是javascript代码:

<script type="text/javascript">
$(document).ready(function () {
    $('#cpass').click(function () {
        $('#form1').collapse('show');
        if ($('#form2').is(':visible'))
            $('#form2').collapse('hide');
    });
    $('#cinfo').click(function () {
        $('#form2').collapse('show');
        if ($('#form1').is(':visible'))
            $('#form1').collapse('hide');
    });
    $('#cmail').click(function () {
        $('#form3').collapse('show');
        if ($('#form4').is(':visible'))
            $('#form4').collapse('hide');
    });
    $('#cplace').click(function () {
        $('#form4').collapse('show');
        if ($('#form3').is(':visible'))
            $('#form3').collapse('hide');
    });
});

该的jsfiddle

我该如何解决这个问题？

Answer 1

第 1 行和第 24 到 26 行是不需要的（它们会导致你的错误）

    });

更新了小提琴