AngularJS - 我需要一个手风琴的选项，当时打开多个面板 [英] AngularJS - I need an accordion with the option to have multiple panels open at the time

问题描述

我有这个指令 JS小提琴expample 与该选项的时候，打开一个面板，我需要修改该行为，给予用户具有多个面板打开的选项。

I have this directive JS Fiddle expample with the option to open one panel at the time, I need to modify that behavior and give to the user the option to have multiple panels open.

下面下面你将看到code这是我的 JS小提琴Expamle 相同

Here below you will see the code which is the same on my JS Fiddle Expamle

    directive("btstAccordion", function () {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {},
        template:
            "<div class='accordion' ng-transclude></div>",
        link: function (scope, element, attrs) {

            // give this element a unique id
            var id = element.attr("id");
            if (!id) {
                id = "btst-acc" + scope.$id;
                element.attr("id", id);
            }

            // set data-parent on accordion-toggle elements
            var arr = element.find(".accordion-toggle");
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("data-parent", "#" + id);
                $(arr[i]).attr("href", "#" + id + "collapse" + i);
            }
            arr = element.find(".accordion-body");
            $(arr[0]).addClass("in"); // expand first pane
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("id", id + "collapse" + i);
            }
        },
        controller: function () {}
    };
}).
directive('btstPane', function () {
    return {
        require: "^btstAccordion",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            title: "@",
            category: "=",
            order: "="
        },
        template:
            "<div class='accordion-group' >" +
            "  <div class='accordion-heading'>" +
            "    <a class='accordion-toggle' data-toggle='collapse'> {{category.name}} - </a>" +

            "  </div>" +
            "<div class='accordion-body collapse'>" +
            "  <div class='accordion-inner' ng-transclude></div>" +
            "  </div>" +
            "</div>",
        link: function (scope, element, attrs) {
            scope.$watch("title", function () {
                // NOTE: this requires jQuery (jQLite won't do html)
                var hdr = element.find(".accordion-toggle");
                hdr.html(scope.title);
            });
        }
    };
})

我该怎么办？

推荐答案

您只需要删除 数据父 属性（ DEMO ）：

You just need to remove the data-parent attribute (DEMO):

//...
// set data-parent on accordion-toggle elements
var arr = element.find(".accordion-toggle");
for (var i = 0; i < arr.length; i++) {
    //$(arr[i]).attr("data-parent", "#" + id);          <------- here
    $(arr[i]).attr("href", "#" + id + "collapse" + i);
}
//...

这篇关于AngularJS - 我需要一个手风琴的选项，当时打开多个面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！