bootstrap.js手風琴折疊/展開

Question

我正在嘗試在每個手風琴琴身上創建上一個/下一個按鈕。

我無法找到折疊/擴展某個部分的方法。 我嘗試從accordion-body取下課堂in但似乎沒有崩潰。

        $(".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');模擬其他手風琴標簽$(value).trigger('click'); 。 根據API你應該只能使用.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）的函數中，並在需要折疊手風琴時調用該函數。