Javascript bootstrap.js手风琴折叠/展开

我试图在每个手风琴体上创建上一个/下一个按钮

我想不出折叠/扩展某个部分的方法。我试图从手风琴体中删除

中的类
，但似乎没有崩溃

        $(".accordion-body").each(function(){
            if($(this).hasClass("in")) {
                $(this).removeClass("in");
            }
        });

此外，无论何时或无论我在上使用
.collapse
方法，我都会收到一个javascript错误，表示对象没有方法折叠。
类中的
只是一个指示某个节已打开的指示器。Javascript模块应用的内联样式与
中的
相同，因此删除该类是不够的

        $(".accordion-body").each(function(){
            if($(this).hasClass("in")) {
                $(this).removeClass("in");
            }
        });

您需要使用模块的API通过
.collapse（）
方法以编程方式与accordion交互：

$('.accordion-body').each(function(){
    if ($(this).hasClass('in')) {
        $(this).collapse('toggle');
    }
});

或者，您可以将其浓缩为：

$('.accordion-body.in').collapse('toggle');

如果只希望折叠任何打开的部分：

$('.accordion-body').collapse('hide');

$('.accordion-body').collapse('show');

如果只想展开任何闭合部分：

$('.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');

及

上述示例已在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'）模拟其他手风琴选项卡的点击。根据，您应该能够使用
.collapse（）
方法，即
$（value）.collapse（'hide'）。但由于某种原因，它不起作用，因此
触发器
它是…
对于此类问题，请使用addClass（“in”）；仅因为使用“.collapse（'toggle/Hide/Show'）；”会干扰未来的切换功能。
另一个相关的用例是当我们在accordion中有表单时&我们希望在验证错误的情况下扩展accordion。扩展Daniel Wright的答案
，我们可以这样做

/**
 * 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');
    });
};

是的

这对我很有用
使用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

  const el = document.getElementById('bodyCollapse');
  el.click();

其中
tagsCollapse
是原始折叠触发按钮的
id
。类似于-

           <a
              data-toggle="collapse"
              href="#accordionBody"
              role="button"
              id="bodyCollapse"
              aria-expanded="false"
              aria-controls="accordionBody"
            >
             accordion header
            </a>



您可以将脚本包装在一个接受一个参数（id）的函数中，并在需要折叠手风琴时调用该函数。
上述答案的引导文档：不起作用。一旦对手风琴项目调用“折叠”，它将停止作为手风琴的功能。例如，如果您打开了另一个，然后打开了一个您称为“折叠”的，则另一个将不再按预期关闭。请参阅：“在显示、隐藏或切换代码后，引导折叠不会切换”
。在v3.3.5中，折叠（'show'）
适用于我。文档说它需要collapse.js和accordion插件。@Nofel（编辑器）请不要从jQuery问题中删除JavaScript。jQuery是用JavaScript编写的，通过删除标记，您就可以删除这些问题的潜在读者。