37

各アコーディオン本体に前/次のボタンを作成しようとしています。

特定のセクションを折りたたむ/展開する方法がわかりません。inからクラスを削除しようとしましたaccordion-bodyが、それは崩壊していないようです。

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

また、メソッドを使用するたび.collapseに、オブジェクトにメソッドの折りたたみがないというjavascriptエラーが発生します。

4

7 に答える 7

72

クラスは、inセクションが開いていることを示す単なる指標です。Javascript モジュールは同じインライン スタイルを適用する.inため、クラスを削除するだけでは不十分です。

.collapse()メソッドを介してプログラムでアコーディオンと対話するには、モジュールの API を使用する必要があります。

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

または、これを次のように要約できます。

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

開いているセクションのみを折りたたむ場合:

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

閉じたセクションのみを展開したい場合：

$('.accordion-body').collapse('show');
于 2012-10-02T21:36:34.870 に答える
4

別の解決策は次のとおりです。

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

コードの重要な部分は、.inを使用するだけでなく、 .collapseクラスを覚えている組み合わせです。

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

と

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

上記の例は、Twitter の Bootstrap v3.3.4 でテストされています。

于 2015-09-24T07:46:36.987 に答える
1

これは、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()メソッドieを使用できるはずです$(value).collapse('hide');。でも、なぜかうまくいかないtrigger…。

于 2015-12-10T06:05:25.417 に答える
0

この種の問題には addClass("in"); を使用します。「.collapse('toggle/Hide/Show');」を使用しているためのみ 将来のトグル機能を妨げます。

于 2016-09-23T14:46:17.653 に答える