twitter-bootstrap 确定 Bootstrap 可折叠元素的折叠状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15814222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Determing collapse state of Bootstrap Collapse-able element
提问by DavidScherer
I display an alert for a user until the density of a shipment goes above a certain value. When the page loads, a function runs that handles all these calculations (in case the user is loading something and not starting from scratch) and if the density is less than X the collapse is shown, otherwise it's hidden.
我会向用户显示警报，直到货件的密度超过特定值。当页面加载时，一个函数会运行来处理所有这些计算（如果用户正在加载一些东西而不是从头开始），如果密度小于 X，则显示折叠，否则隐藏。
The problem is that when calling .collapse('hide') or .collapse('show') on an element that's already hidden/shown causes it to do the opposite.
问题是，当在已经隐藏/显示的元素上调用 .collapse('hide') 或 .collapse('show') 时，会导致它做相反的事情。
I define my alert as such:
我这样定义我的警报：
<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>
The jQuery that handles all this:
处理这一切的 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();
I was thinking to solve this by testing if it's already collapsed before calling .collapse('show'|'hide') but I don't know how. If there's a more elegant solution to this problem, I'd love to hear it.
我想通过在调用 .collapse('show'|'hide') 之前测试它是否已经折叠来解决这个问题，但我不知道如何。如果这个问题有更优雅的解决方案，我很乐意听到。
Also, I found this issue If the first call to collapse is hide the collapsable will show insteadhere which seems related but I added the $('#...').collapse({toggle: false});with no effect.
另外，我发现了这个问题如果第一次调用折叠是隐藏，可折叠将显示在这里，这似乎相关，但我添加了$('#...').collapse({toggle: false});没有效果。
采纳答案by DavidScherer
The following seems to be working, though I'd love to see a better answer or solution, what I'm doing feels hacky and would probably make most jQ devs cringe.
以下似乎有效，尽管我很想看到更好的答案或解决方案，但我正在做的事情感觉很笨拙，可能会让大多数 jQ 开发人员感到畏缩。
Basically, I now show/hide the alert from within the updateTotals() function. I changed from using the show/hide events that happen afterthe collapse and am now using those events that fire beforethe collapse happens. I test to see if the height of the collapse is what I would expect it to be for what I'm about to do (if I'm about the show it but the height is > 0 it must already be shown) and if it fails this sanity check I return falsewhich seemsto be canceling the event from firing (I hope) or something similar because currently, unless there's a case I'm not testing for, this works as it should. Attempting to show the alert when it's shown does not hide it and vice versa.
基本上，我现在在 updateTotals() 函数中显示/隐藏警报。我改变了使用崩溃后发生的显示/隐藏事件，现在使用那些在崩溃发生之前触发的事件。我进行测试以查看倒塌的高度是否符合我对即将要做的事情的期望（如果我要展示它但高度 > 0 它必须已经显示），如果它这个健全性检查 I 失败了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();
});
回答by Juraj Béger
I know this is an older post, but I've been stuck on this one too. So with bootstrap 4.1 I use this to examine the state of the accordion:
我知道这是一篇较旧的帖子，但我也一直坚持这个帖子。因此，在 bootstrap 4.1 中，我使用它来检查手风琴的状态：
var isVisible = $('#collapseOne').is( ":visible" );
alert(isVisible);
and the other way arround, if You want to check if it is hidden:
反之亦然，如果您想检查它是否隐藏：
var isHidden = $('#collapseOne').is( ":hidden" );
alert(isHidden);
回答by GGleGrand
I use this, for example, to determine if element collapseTwo is closed, and then to open it. Works the other way around too, of course.
例如，我使用它来确定元素 collapseTwo 是否已关闭，然后再将其打开。当然，反之亦然。
if ($('#collapseTwo').attr('aria-expanded') == "false") {$('#collapseTwo').collapse('show');}
回答by tofirius
Another option: Check if it is missing the .inclass.
另一种选择：检查它是否缺少.in类。
if(!$('#collapseTwo').hasClass('collapse in')){
$('#collapseTwo').collapse('show');
}
