我正在尝试在每个手风琴体上创建上一个/下一个按钮。
我想不出折叠/展开某个部分的方法。我尝试从课程中删除课程in，accordion-body但这似乎并没有崩溃。
$(".accordion-body").each(function(){
if($(this).hasClass("in")) {
$(this).removeClass("in");
}
});
同样，无论何时或无论我使用该.collapse方法，我都会收到一个 javascript 错误，指出该对象没有方法崩溃。
该类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');
这是另一个解决方案：
/**
* 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');” 会干扰未来的切换功能。
另一个相关的用例是当我们在手风琴内有表单并且我们想要使用验证错误扩展手风琴时。扩展 Daniel Wright 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
});
});