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

Posted 2023-03-24

【中文标题】确定 Bootstrap 折叠表元素的折叠状态

【英文标题】：Determing collapse state of Bootstrap Collapse-able element

【发布时间】：2013-03-26 16:55:40

【问题描述】：

我会向用户显示警报，直到货件的密度超过某个值。当页面加载时，会运行一个函数来处理所有这些计算（以防用户加载某些内容而不是从头开始），如果密度小于 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);，但没有任何效果。

【参考方案1】：

我知道这是一篇较旧的帖子，但我也一直被困在这个帖子上。所以使用 bootstrap 4.1 我用它来检查手风琴的状态：

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

反之，如果你想检查它是否被隐藏：

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

【讨论】：

这绝对令人抓狂。我尝试关注 Bootstrap 的事件，但是当我尝试使用 hidden 状态获取新数据并更新 UI 然后调用 .collapse('show') 时，它很少会进入循环状态。我可以阻止这种情况的唯一方法是在尝试再次显示之前使用此检查它确实被隐藏了。感觉像是 Bootstrap 4 中的一个错误。

我将其更新为已接受的答案，因为它适用于 BS 3 和 4 并且更简洁。

【参考方案2】：

例如，我使用它来确定元素 collapseTwo 是否关闭，然后打开它。当然，反过来也可以。

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

【讨论】：

它通过检查 attr('aria-expanded') == "false" 给我准确的结果，而 hasClass('collapse') 在第二次尝试后给出结果

【参考方案3】：

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

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

【参考方案4】：

以下似乎有效，虽然我很想看到更好的答案或解决方案，但我正在做的事情感觉很老套，可能会让大多数 jQ 开发人员畏缩。

基本上，我现在在 updateTotals() 函数中显示/隐藏警报。我改变了使用在崩溃 之后发生的显示/隐藏事件，现在正在使用那些在崩溃发生之前 触发的事件。我测试一下坍塌的高度是否是我所期望的，因为我将要做的事情（如果我要展示它但高度> 0，它必须已经展示），如果它未能通过此健全性检查我 return false 似乎正在取消触发事件（我希望）或类似的事情，因为目前，除非有我没有测试的情况，否则它应该可以正常工作.尝试在显示警报时显示它不会隐藏它，反之亦然。

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');
    

    if((total_density.toFixed(2) < 6) || isNaN(total_density.toFixed(2))) 
        $('#cubicCapacityWarn').collapse('show');
     else 
        $('#cubicCapacityWarn').collapse('hide');
    



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

$('#cubicCapacityWarn').on('show', function(event)

    if($(this).height() > 0) 
        return false;
    

    console.log('shown');
    event.stopPropagation();

);

$('#cubicCapacityWarn').on('hide', function(event)

    if($(this).height() == 0) 
        return false;
    

    console.log('hidden');
    event.stopPropagation();
);