jquery - Bootstrap.js (3.1) 崩溃 ('hide' ) 如果在崩溃 ('show' ) 之后调用太快，则不会隐藏元素

Question

我有以下代码，它根据 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);
    }
});

Fiddle

Answer 1

您可以禁用选择直到动画完成，这样问题就不会出现。在从 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