Question

由于CMS的一些限制，我正在开发，因为我无法在页面加载时使用Bootstrap 3为适当的手风琴创建预期的标记，但是我可以非常接近。

我遇到的问题是最初的问题面板组ID（accordion1），我无法分配正确的数据 - parent =＆＃34; accordion1＆＃34;数据切换=＆＃34;崩溃＆＃34;面板中的元素。我试图将数据父引用重写为正确的手风琴ID，但它没有影响，就像崩溃绑定已经到位而且我不确定如何绕过它。

这是我的问题的一个例子。（id＆＃39; s在页面加载时是相同的，但我尝试用dom-ready上的脚本重写它们）

$(document).ready(function() {
  $('.panel-group').each(function() {
    var $t = $(this);
    var id = "#" + $t.attr("id");
    $t.find('[data-parent]').attr("data-parent", id);
  });
});

此功能将标记修复为BS3想要但功能仍然破坏。

http://plnkr.co/CTBekXVyzU0xjzlud2N1

Answer 1

我最终弄清楚错误是我自己的错误。多个手风琴不是问题。我出错的地方是标记。我的方式中的错误，例如data-toggle =“collapse”元素的href =“＃collapse-0”对于两个手风琴都是重复的。它们必须是独一无二的然而，CMS限制仍存在于数据父级上。这导致我重做我的脚本（现在可以用于多个手风琴）

    $('.panel-group').each(function(){
        //setup each panel group with individual id's appropriately
        var $t = $(this);
        var id = "#" + $t.attr('id');
        var randomInt = $t.attr('id').split('_')[1]; //extract

        $t.find('.panel').each(function(){
            //set the proper collapsable targets for each
            var $t = $(this);
            var $dataParent = $t.find('[data-parent]');
            var href = $dataParent.attr('href');

            //set the collapse target
            var $targetId = $dataParent.attr('href', injectRandom(href, randomInt));
            var targetId = $targetId.attr('href').split('#')[1];

            //set the random id's
            $dataParent.attr('data-parent', id);

            //set the collapse container
            $dataParent.parents('.panel-heading:first').next().attr('id', targetId);
        });
        //open first pane
        $t.find('[data-toggle]:first').trigger('click');

    });

我会更新plunkr

Bootstrap 3在一个页面上的多个Accordions必须在事后分配数据父值

1 个答案: