Question

我有以下代码在div上调用bootstrap 3.1 js方法collapse()，其中'show'或'hide'作为参数，基于select输入元素中所选项的值。 / p>

我遇到的问题是，如果用户通过键盘上的向上/向下箭头过快地更改选择，她将暂时越过'角落，并且将显示div，但是当她继续进行另一个选择时，即使$selectedText的结束值不等于'Corner'，div也不会被隐藏。

我认为这是因为在$col.collapse('hide')完成之前调用了$col.collapse('show')，但我不知道该怎么办。

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

你可以禁用select直到动画完成，这样就不会出现问题。我在$col到Corner之间快速更改后尝试检查L Shape，发现$col正在上课collapsing，这意味着之前的过渡不是完整。

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', '')
})

小提琴here

Answer 2

另一种可能的解决方案是简单地切换div的可见性，而不是使用折叠动画。使用如下所示的JQuery方法hide()和show()似乎表现得非常好，无法完成工作。

    if ($selectedText === 'Corner') {
        $col.show();
    }
    else {
        $col.hide();
        ClearFormFields($col);
    }

Answer 3

我有一个类似的问题，如果你使用hide（），崩溃将无法工作，直到你再次显示（）它。显示/隐藏元素而不用＆＃34;打破＆＃34;崩溃，你可以添加/删除＆＃34;在＆＃34;上课/下课

$col.addClass('in');
...
$col.removeClass('in');

Bootstrap.js（3.1）collapse（'hide'）不会隐藏元素，如果在崩溃后过早调用（'show'）

3 个答案: