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

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

$(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

Answer 2

尽管有一些方法可以简化您的JS代码，但我会保留一般格式并稍微修改它以获得效果。请注意，您可以使用逗号选择多个div对象。

您可以通过添加像rkamath建议的动画来使代码更清晰。他提供了幻灯片效果。这也是一种淡化效果，方便您使用：

$(document).ready(function () {
$('#cpass').click(function () {
    $('#form2,#form3,#form4').hide();
    $('#form1').fadeIn();

});
$('#cinfo').click(function () {
    $('#form1,#form3,#form4').hide();
    $('#form2').fadeIn(); 

});
$('#cmail').click(function () {
    $('#form4,#form2,#form1').hide();
    $('#form3').fadeIn();

});
$('#cplace').click(function () {
    $('#form3,#form2,#form1').hide();
    $('#form4').fadeIn();

});
});

这是fiddle。

如果你真的想在这里保留代码的一般结构，那就去吧：

$('#cpass').click(function () {
    $('#form1').collapse('show');
    if ($('#form2,#form3,#form4').is(':visible'))   $('#form2,#form3,#form4').collapse('hide');
});

$('#cinfo').click(function () {
    $('#form2').collapse('show');
    if ($('#form1,#form3,#form4').is(':visible'))  
    $('#form1,#form3,#form4').collapse('hide');
});

$('#cmail').click(function () {
    $('#form3').collapse('show');
    if ($('#form4,#form2,#form1').is(':visible')) 
    $('#form4,#form2,#form1').collapse('hide');
});

$('#cplace').click(function () {
    $('#form4').collapse('show');
    if ($('#form3,#form2,#form1').is(':visible'))  
    $('#form3,#form2,#form1').collapse('hide');
});

这是fiddle。

Answer 3

不需要第1行和第24到26行（正在制作您的错误）

});

Updated Fiddle

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

3 个答案: