AngularJS - 我需要一个手风琴的选项,当时打开多个面板多个、手风琴、选项、面板

2023-09-13 04:18:51 作者:魔神英雄传

我有这个指令 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);
}
//...