javascript - 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 打开，则表单 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

用 slideUp 和 slideDown 更新了你的 jQuery 代码。它一次只打开一个表格。还为所有表单添加一个通用的有意义的类名，以便您可以在不显式使用多个 id/class 的情况下调用 hide/sildeUp

$(document).ready(function () {
    $('#cpass').click(function () {
        $('#form1').slideDown();
        $('#form2,#form3,#form4').slideUp();
    });
    $('#cinfo').click(function () {
        $('#form2').slideDown();
        $('#form1,#form3,#form4').slideUp();
    });
    $('#cmail').click(function () {
        $('#form3').slideDown();
        $('#form1,#form2,#form4').slideUp();
    });
    $('#cplace').click(function () {
        $('#form4').slideDown();
        $('#form1,#form2,#form3').slideUp();
    });
});

编辑:删除内联 onclick 和 css 以保持 html 干净

fiddle