确定Bootstrap可折叠元素的折叠状态

Question

我会为用户显示警报，直到货件的密度超过特定值为止。当页面加载时，将运行一个函数来处理所有这些计算（如果用户正在加载某些内容而不是从头开始），并且如果密度小于X，则会显示折叠，否则将被隐藏。

问题是，在已经隐藏/显示的元素上调用.collapse（'hide'）或.collapse（'show'）时，它会执行相反的操作。

我将警报定义为：

<div class="row spacer-bottom collapse in" id="cubicCapacityWarn">

    <div class="span8 offset1">

        <div class="alert alert-error">
            <h4><strong>Cubic Capacity Warning!</strong></h4>
            Shipment Total PCF less than 6, you may be assessed Cubic Capacity surcharges!
        </div>

    </div>

</div>

处理所有这些的jQuery：

function updateTotals() {

    var total_weight, total_volume, total_density;

    total_weight = 0;
    total_volume = 0;
    total_density = 0;

    $('#units').find('table.unit').each(function(index){

        var weight, volume, density;

        weight = 0;
        volume = 0;
        density = 0;

        volume = parseFloat($(this).find('.unit_cube').text(), 10);

        $(this).find('tbody.products tr').each(function(pIndex){

            weight += parseFloat($(this).find('.weight').text(), 10);

        });

        density = weight / volume;
        density = density.toFixed(2);

        $(this).find('.unit_density').text(density);

        total_weight += (weight * parseInt($(this).find('.unit_num_of').text(), 10));
        total_volume += (volume * parseInt($(this).find('.unit_num_of').text(), 10));

    });


    total_density = total_weight / total_volume;

    $('#total_weight').text(total_weight.toFixed(2));
    $('#total_volume').text(total_volume.toFixed(2));
    if(isNaN(total_density.toFixed(2))) {
        $('#total_density').text("0.00").trigger('change');
    } else {
        $('#total_density').text(total_density.toFixed(2)).trigger('change');
    }

}

$('#cubicCapacityWarn').collapse({toggle: false})

$('#cubicCapacityWarn').on('shown', function(event){
    event.stopPropagation();
    return false;
});

$('#cubicCapacityWarn').on('hidden', function(event){
    alert('hidden')
    event.stopPropagation();
    return false;
});

$('#total_density').change(function(){

    if(parseFloat($(this).text()) < 6) {

        $('#cubicCapacityWarn').collapse('show');
        alert('show')

    } else {

        $('#cubicCapacityWarn').collapse('hide');

    }

});

updateTotals();

我正在考虑通过在调用.collapse（'show'|'hide'）之前测试它是否已经折叠来解决此问题，但我不知道如何。如果有解决这个问题的更优雅的方法，我很想听听。

此外，我在这里发现了似乎与此相关的问题If the first call to collapse is hide the collapsable will show instead，但我添加了$('#...').collapse({toggle: false});无效。

Answer 1

例如，我用它来确定是否关闭了元素collapseTwo，然后再将其打开。当然，也可以采用其他方法。

if ($('#collapseTwo').attr('aria-expanded') == "false") {$('#collapseTwo').collapse('show');}

Answer 2

我知道这是一篇较旧的文章，但我也一直停留在此文章上。因此，在bootstrap 4.1中，我使用它来检查手风琴的状态：

var isVisible = $('#collapseOne').is( ":visible" );
alert(isVisible);

和另一种方法，如果要检查是否隐藏：

var isHidden = $('#collapseOne').is( ":hidden" );
alert(isHidden);

Answer 3

另一个选项：检查是否缺少.in类。

if(!$('#collapseTwo').hasClass('collapse in')){
   $('#collapseTwo').collapse('show');
}

Answer 4

以下内容似乎有用，尽管我很想看到一个更好的答案或解决方案，但我正在做的事情感觉很棘手，可能会使大多数jQ开发人员畏缩。

基本上，我现在从updateTotals（）函数中显示/隐藏警报。我从使用发生在[崩溃之前的show / hide事件改变了，现在我使用的是在崩溃[中触发的事件。我测试以查看折叠的高度是否是我将要执行的操作（如果要显示，但高度> 0必须已经显示），以及是否已显示未通过此健全性检查I return false，该事件[[似乎会从触发（我希望）或类似的操作中取消该事件，因为当前，除非有我不对此进行测试的情况，否则此工作应正常进行。尝试在显示警报时显示警报不会将其隐藏，反之亦然。

确定Bootstrap可折叠元素的折叠状态

问题描述投票：1回答：4

4个回答

最新问题

确定Bootstrap可折叠元素的折叠状态

问题描述 投票：1回答：4

4个回答

最新问题

问题描述投票：1回答：4