静态学习Bootstrap,我试图用复选框创建一个输入表单,其中任何复选框的下拉列表出现(对于特定的复选框)。我遇到的问题是每当出现下拉菜单时,都会将其他复选框转移。我想阻止它,以便复选框固定到位,并且在下拉菜单出现时不会左右移动。Bootstrap动态下拉复选框格式
下面是HTML片段:
<div class="container-fixed">
<div class="row">
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="cheese" >cheese
<div class="form-group"id="cheese">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="Broccoli" >Broccoli
<div class="form-group"id="Broccoli">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="Peppers" >Peppers
<div class="form-group"id="Peppers">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
这里是jQuery的:
$(document).ready(function() {
$("input").click(function() {
var show = "#" + this.value
$(show).show();
})
})