我有以下代码,它根据 a 中所选项目的值调用 div 上的 bootstrap 3.1 js 方法 collapse()
,并使用“show”或“hide”作为参数选择输入元素。
我遇到的问题是,如果用户通过键盘上的向上/向下箭头太快地更改选择,她将暂时越过“角”,并且将显示 div,但是当她继续进行另一个选择时,即使 $selectedText
的最终值不等于“Corner”,div 也不会被隐藏。
我认为这是因为在 $col.collapse('show')
完成之前调用了 $col.collapse('hide')
,但我不知道该怎么办。
HTML
<div id="cubicleConfigurationForm">
<div class="row cubicleConfigurationForm_rowWorkSurfaceConfiguration">
<div class="col-md-2">
<div class="form-group">
<label><abbr title="Work Surface" class="initialism">WS</abbr> Depth</label>
<select name="cubicleConfigurationForm_cubicle1_ddlWorkSurfaceDepth" class="form-control">
<option value="0">Undefined</option>
<option value="24">D24</option>
<option value="30">D30</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label><abbr title="Work Surface" class="initialism">WS</abbr> Configuration</label>
<select name="cubicleConfigurationForm_cubicle1_ddlWorkSurfaceConfig" class="form-control cubicleConfigurationForm_ddlWorkSurfaceConfig">
<option value="0">Undefined</option>
<option value="2">Corner</option>
<option value="1">L Shape</option>
</select>
</div>
</div>
<div class="col-md-3 cubicleConfigurationForm_colCurvedCorner collapse in" style="height: auto;">
<label>Curved Corner?</label>
<br>
<div class="checkbox">
<label>
<input type="checkbox" name="cubicleConfigurationForm_cubicle1_cbCurvedCornerRequested">
Curved Corner
</label>
</div>
</div>
</div>
</div>
JS
$('#cubicleConfigurationForm').on('change', '.cubicleConfigurationForm_ddlWorkSurfaceConfig', function () {
var $this = $(this);
var $selectedText = $this.find(':selected').text();
var $col = $this.parents('div.cubicleConfigurationForm_rowWorkSurfaceConfiguration').children('div.cubicleConfigurationForm_colCurvedCorner');
if ($selectedText === 'Corner') {
$col.collapse('show');
}
else {
$col.collapse('hide');
ClearFormFields($col);
}
});
最佳答案
您可以禁用选择
直到动画完成,这样问题就不会出现。在从 Corner
快速更改为 L Shape
后,我尝试检查 $col
并发现 $col
类正在崩溃
,这意味着之前的转换尚未完成。
JS
//disabling the select here
if ($selectedText === 'Corner') {
$col.collapse('show');
$('select').prop('disabled', 'disabled')
} else {
$col.collapse('hide');
$('select').prop('disabled', 'disabled')
ClearFormFields($col);
}
//enabling the select after the animation is done i.e on shown or hidden. #test is given for this demo
$('#test').on('shown.bs.collapse', function () {
console.log("shown");
$('select').prop('disabled', '')
})
$('#test').on('hidden.bs.collapse', function () {
console.log("hidden");
$('select').prop('disabled', '')
})
fiddle here
关于jquery - Bootstrap.js (3.1) 崩溃 ('hide' ) 如果在崩溃 ('show' ) 之后调用太快,则不会隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27006264/