Question

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

我无法找到折叠/扩展某个部分的方法。我尝试从in删除课程accordion-body，但似乎没有崩溃。

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

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

Answer 1

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');

Answer 2

这是另一种解决方案：

/**
 * 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中进行了测试

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

我正在使用$(value).trigger('click');模拟其他手风琴标签的点击。根据{{3}}，您应该能够使用.collapse()方法，即$(value).collapse('hide');。但由于某些原因它不起作用trigger它是......

Answer 4

对于这类问题，请使用addClass（“in”）;只是因为使用“.collapse（'toggle / Hide / Show'）;”将扰乱未来的切换功能。

Answer 5

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

Answer 6

我做到了

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

这对我有用

Answer 7

使用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
    });
});

Answer 8

使用香草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）的函数中，并在需要折叠手风琴时调用该函数。

bootstrap.js手风琴折叠/展开

8 个答案: