我正在尝试在每个手风琴主体上创建上一个/下一个按钮。
我想不出折叠/展开某个部分的方法。我尝试从accordion-body 中删除类in，但这似乎并没有崩溃。
$(".accordion-body").each(function(){
if($(this).hasClass("in")) {
$(this).removeClass("in");
}
});
此外，无论何时或无论我使用 .collapse 方法，我都会收到一个 javascript 错误，提示该对象没有方法崩溃。
【问题讨论】：
标签： javascript jquery twitter-bootstrap
in 类只是一个部分打开的指示器。 Javascript 模块应用与.in 相同的内联样式，因此删除类是不够的。
您需要使用模块的 API 通过.collapse() 方法以编程方式与手风琴交互：
$('.accordion-body').each(function(){
if ($(this).hasClass('in')) {
$(this).collapse('toggle');
}
});
或者，您可以将其浓缩为：
$('.accordion-body.in').collapse('toggle');
如果您只想折叠任何打开的部分：
$('.accordion-body').collapse('hide');
如果您只想扩展任何封闭的部分：
$('.accordion-body').collapse('show');
【讨论】：
.collapse('show') 在 v3.3.5 中为我工作。文档说它需要 collapse.js 和手风琴插件。
这是另一个解决方案：
/**
* Make an accordion active
* @param {String} id ID of the accordion
*/
var activateAccordion = function (id) {
// Get the parents
var parents = $('a[href="#' + id + '"]').parents('.panel-group').children('.panel');
// Go through each of the parents
$.each(parents, function (idx, obj) {
// Check if the child exists
var find = $(obj).find('a[href="#' + id + '"]'),
children = $(obj).children('.panel-collapse');
if (find.length > 0) {
// Show the selected child
children.removeClass('collapse');
children.addClass('in');
} else {
// Hide the others
children.removeClass('in');
children.addClass('collapse');
}
});
};
代码的重要部分是组合，记住 .collapse 类，而不仅仅是使用 .in：
// Show the selected child
children.removeClass('collapse');
children.addClass('in');
和
// Hide the others
children.removeClass('in');
children.addClass('collapse');
上面的例子已经在 Twitter 的 Bootstrap v3.3.4 中测试过
【讨论】：
这适用于 Bootstrap 3 中的手风琴：
var selector = $('.panel-heading a[data-toggle="collapse"]');
selector.on('click',function() {
var self = this;
if ($(this).hasClass('collapsed')) {
$.each(selector, function(key, value) {
if (!$(value).hasClass('collapsed') && value != self) {
$(value).trigger('click');
}
});
}
});
我正在使用$(value).trigger('click'); 模拟单击其他手风琴选项卡。根据API，您应该只能使用.collapse() 方法，即$(value).collapse('hide');。但由于某种原因它不起作用所以trigger 它是......
【讨论】：
对于此类问题，请使用 addClass("in");只是因为使用了“.collapse('toggle/Hide/Show');”会干扰未来的切换功能。
【讨论】：
另一个相关的用例是当我们在手风琴内有表单并且我们想要扩展手风琴时出现验证错误。扩展丹尼尔赖特的答案 https://stackoverflow.com/a/12698720/6504104，我们可以这样做
/**
* Expands accordions that have fields with errors
*
*/
var _expandAccordions = function () {
$form = $('.my-input-form');
// you can adjust the following lines to match your form structure / error classes
var $formGroups = $form.find('.form-group.has-error');
var $accordions = $formGroups.closest('.accordion-body');
$accordions.each(function () {
$(this).collapse('show');
});
};
【讨论】：
我做到了，
$('.mb-0').click(function(){
$('.collapse').collapse('hide');
$('.collapse.in').collapse('show');
});
这对我有用
【讨论】：
使用 Bootstrap 4 在卡片主体内添加以下按钮
<input type="button" class="btn btn-secondary btn-block btn-sm mt-3 text-center card-proceed-next" value="Proceed" />
<input type="button" class="btn btn-secondary btn-block btn-sm mt-3 text-center card-proceed-prev" value="Previous" />
添加以下 javascript（包括带有验证错误的 Azhar Khattak 显示面板）：
$(function () {
$('.card-proceed-next').click(function (e) {
e.preventDefault();
$(e.target).closest('.collapse').collapse('hide'); // hide current accordion panel
$(e.target).closest('.card').next('.card').find('.collapse').addClass('show'); // show next accordion panel
});
$('.card-proceed-prev').click(function (e) {
e.preventDefault();
$(e.target).closest('.collapse').collapse('hide'); // hide current accordion panel
$(e.target).closest('.card').prev('.card').find('.collapse').addClass('show'); // show previous accordion panel
});
var $elErrors = $('#accordion').find('.field-validation-error'); // elements with error class
var $accordionsWithErrors = $elErrors.closest('.collapse'); // accordions with error elements
if ($accordionsWithErrors.length > 0) $('.collapse').collapse(); // collapse all accordion panels due to the first accordion panel shown as default
$accordionsWithErrors.each(function () {
$(this).addClass('show'); // show accordion panels with error messages
});
});
【讨论】：