我尝试使用Bootstrap 3折叠函数来设计一个表来显示两个不同的HTML表单。有一个问题,如果我点击form1,form1可以正确显示,但如果我点击form2,form2将显示在form1下。
我想在打开form2时,form1将关闭并且只显示form2.I尝试使用data-parent,但它仍然不起作用。
我正在使用以下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-toggle="collapse" data-target="#form1" data-parent="#myAccordion">form1</button></td>
<td width=50%><button type="button" class="btn btn-primary btn-lg" data-toggle="collapse" data-target="#form2" data-parent="#myAccordion">form2</button></td>
</tr>
<tr>
<td colspan="2">
<div id="form1" class="collapse">
. <form method="POST" novalidate="novalidate">
<div class="form-group">
<label for="number1" class="control-label ">number1</label>
<input type="text" class="form-control" id="number1" name="number1" >
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="number2" class="control-label ">number2</label>
<input type="text" class="form-control" id="number2" name="number2" >
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="number3" class="control-label ">number3</label>
<input type="text" class="form-control" id="number3" name="number3" >
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-block">submit</button>
</form>
</div>
<div id="form2" class="collapse">
. <form method="POST" novalidate="novalidate">
<div class="form-group">
<label for="newinfo" class="control-label ">info</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">submit</button>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
我的代码中有什么问题?
答案 0 :(得分:0)
您可以使用bootstrap下拉列表。
HTML ------------
<nav class="my_style navbar navbar-default">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS ----------
.my_style .navbar-nav>li>.dropdown-menu{
position:relative;
}
您可以访问此bootplay演示。
答案 1 :(得分:0)
利用bootstrap提供的javascript方法,对代码进行了一些更改。
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="form1btn">form1</button></td>
<td width=50%><button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion" id="form2btn">form2</button></td>
</tr>
<tr>
<td colspan="2">
<div id="form1" class="collapse">
. <form method="POST" novalidate="novalidate">
<div class="form-group">
<label for="number1" class="control-label ">number1</label>
<input type="text" class="form-control" id="number1" name="number1" >
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="number2" class="control-label ">number2</label>
<input type="text" class="form-control" id="number2" name="number2" >
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="number3" class="control-label ">number3</label>
<input type="text" class="form-control" id="number3" name="number3" >
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-block">submit</button>
</form>
</div>
<div id="form2" class="collapse">
. <form method="POST" novalidate="novalidate">
<div class="form-group">
<label for="newinfo" class="control-label ">info</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">submit</button>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
以下是Javascript
$('#form1btn').click(function(){
$('#form1').collapse('show');
if ( $('#form2').is(':visible'))
$('#form2').collapse('hide');
});
$('#form2btn').click(function(){
$('#form2').collapse('show');
if ( $('#form1').is(':visible'))
$('#form1').collapse('hide');
});
在这里找到它..