首页 文章

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

提问于
浏览 次
0

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

我遇到的问题是初始面板组id（accordion1），我无法将正确的data-parent =“accordion1”分配给面板中的data-toggle =“collapse”元素 . 我试图重写数据父引用到正确的手风琴ID，但它没有影响，就像崩溃绑定已经到位，我不知道如何解决它 .

这是我的问题的一个例子 . （id在页面加载时是相同的，但我尝试用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

twitter-bootstrap-3 accordion

1 回答

  • 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

    回复于

相关问题