確定Bootstrap可摺疊元素的崩潰狀態

我會向用戶顯示警報，直到出貨密度高於某個值。當頁面加載時，將運行一個處理所有這些計算的函數（如果用戶正在加載內容而不是從頭開始），並且如果密度小於X，則會顯示崩潰，否則將隱藏。確定Bootstrap可摺疊元素的崩潰狀態

問題是，在已經隱藏/顯示的元素上調用.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之前已經崩潰解決這個（」顯示'|'隱藏'），但我不知道如何。如果這個問題有更好的解決方案，我很樂意聽到它。

此外，我發現這個問題If the first call to collapse is hide the collapsable will show instead這裏似乎相關，但我加了$('#...').collapse({toggle: false});沒有效果。

來源

2013-04-04 DavidScherer

以下似乎工作，雖然我很想看到更好的答案或解決方案，我做的感覺hacky，可能會使大多數jQ開發人員畏縮。

基本上，我現在顯示/隱藏updateTotals（）函數內的警報。我從使用之後的崩潰之後的顯示/隱藏事件發生了變化，並且現在正在使用那些在之前發生崩潰的事件。我測試了一下，看看崩潰的高度是否與我期望的那樣相符（如果我是展示它，但高度大於0，它必須已經顯示），如果它這個理智檢查失敗我return false其中似乎將取消從發射（我希望）或類似的事件，因爲目前，除非有一種情況下，我沒有測試，這是工作的，因爲它應該。嘗試在顯示警報時不顯示警報，反之亦然。

來源

2013-04-04 16:32:53 DavidScherer

例如，我使用它來確定是否關閉元素collapseTwo，然後將其打開。當然也可以用其他方式工作。

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

來源

2015-12-12 15:49:20 GGleGrand

另一種選擇：檢查它是否缺少.in類。

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

來源

2016-08-01 21:56:58 tofirius

確定Bootstrap可摺疊元素的崩潰狀態

回答

相關問題