我有这个指令 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);
}
//...
上一篇:显示功能,同时从数据库获取数据的进度进度、功能、数据库、数据
下一篇:如何连接与使用JavaScript的OAuth 1.0a的一个API? [Angular.js]OAuth、JavaScript、js、Angular