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

bootstrap.js Accordion Collapse / Expand

提问by Michael

I'm trying to create previous / next buttons on each accordion body.

我正在尝试在每个手风琴主体上创建上一个/下一个按钮。

I can't figure out a way to collapse / expand a certain section. I tried removing the class infrom the accordion-bodybut that does not seem to collapse.

我想不出折叠/展开某个部分的方法。我尝试从 中删除该类in，accordion-body但似乎没有崩溃。

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

Also whenever or whatever I use the .collapsemethod on, I get a javascript error saying that object has no method collapse.

此外，无论何时或无论我使用该.collapse方法，我都会收到一个 javascript 错误，指出该对象没有方法崩溃。

回答by Daniel Wright

The inclass is just an indicator that a section is open. The Javascript module applies the same inline styles as .indoes, so removing the class is insufficient.

本in类只是一个指标，一个部分是开放的。Javascript 模块应用相同的内联样式.in，因此删除类是不够的。

You need to use the module's API to programmatically interact with the accordion, via the .collapse()method:

您需要使用模块的 API 通过以下.collapse()方法以编程方式与手风琴交互：

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

Or, you can condense this down to:

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

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

If you want only to collapse any open sections:

如果您只想折叠任何打开的部分：

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

If you want only to expanded any closed sections:

如果您只想展开任何关闭的部分：

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

回答by Cristi Draghici

Here is another solution:

这是另一个解决方案：

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

The important part of the code is the combination, remembering the .collapseclass, not just using .in:

代码的重要部分是组合，记住.collapse类，而不仅仅是使用.in：

// Show the selected child
children.removeClass('collapse');
children.addClass('in');

and

和

// Hide the others
children.removeClass('in');
children.addClass('collapse');

The above example has been tested in Twitter's Bootstrap v3.3.4

上面的例子已经在 Twitter 的 Bootstrap v3.3.4 中测试过

回答by anthonygore

This works for accordions in Bootstrap 3:

这适用于 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');
      }
    });
  }
});

I'm simulating a click of the other accordion tabs with $(value).trigger('click');. According to the APIyou should just be able to use the .collapse()method i.e. $(value).collapse('hide');. But it doesn't work for some reason so triggerit is...

我正在模拟单击其他手风琴标签$(value).trigger('click');。根据API，您应该能够使用该.collapse()方法 ie $(value).collapse('hide');。但由于某种原因它不起作用所以trigger它是......

回答by Vikram

For this kind of problem use addClass("in"); only because of using ".collapse('toggle/Hide/Show');" will disturb the future toggle functionality.

对于此类问题，请使用 addClass("in"); 只是因为使用“.collapse('toggle/Hide/Show');” 会干扰未来的切换功能。

回答by Azhar Khattak

Another related use case is when we have forms inside accordions & we want to expand accordion with validation errors. Extending the answer by Daniel Wright https://stackoverflow.com/a/12698720/6504104, we can do something like

另一个相关的用例是当我们在手风琴中有表单并且我们想要扩展带有验证错误的手风琴时。扩展 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');
    });
};

回答by Raphael Oliveira

I did,

我做了，

$('.mb-0').click(function(){
  $('.collapse').collapse('hide');
  $('.collapse.in').collapse('show');
});

and this works for me

这对我有用

回答by Jodda

Using Bootstrap 4 add the following buttons inside the card body

使用 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" />

Add the following javascript (includes Azhar Khattak show panels with validation errors):

添加以下 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
    });
});

回答by Emmanuel Ndukwe

with vanilla javascript

使用香草 javascript

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

where tagsCollapseis idof the original collapse trigger button. Something like -

这里tagsCollapse是id原来的崩溃触发按钮。就像是 -

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

You could wrap the script in a function that accepts one parameter (id) and invoke the function whenever you need to collapse an accordion.

您可以将脚本包装在一个接受一个参数 (id) 的函数中，并在需要折叠手风琴时调用该函数。