Полный код >>> https://plnkr.co/edit/uyq9G2Nflr1iaxvr09Wa?p=preview
У меня есть загрузочный аккордеон, который я хочу подключить к нескольким кругу svg со ссылками на них.
Поскольку я использую angular, я поместил директивы ng-click="clickcollapseOuter($event)"
на каждую ссылку svg (внешние круги). Который запускает эту функцию, определенную в угловом контроллере:
$scope.clickcollapseOuter = function(e) {
$('#accordion .collapse.in').collapse('hide');
$('#inner-accordion .collapse.in').collapse('hide');
var targetcircle = $(e.target);
$(".svgcircle").removeClass("fff-onfocus");
targetcircle.toggleClass("fff-onfocus");
var targetcontent = document.querySelectorAll('.' + targetcircle.attr("id"));
targetcontent = Array.prototype.slice.call(targetcontent);
console.log(targetcontent); // returns an empty array
targetcontent.collapse('toggle');
// TypeError: targetcontent.collapse is not a function
};
Как вы можете видеть из моих комментариев в этом разделе кода, у меня есть две проблемы:
Во-первых, массив targetcontent
пуст, когда он должен содержать соответствующий свертываемый div целевого объекта (настроенный в связанном файле javascript). Во-вторых, я получаю TypeError, когда пытаюсь использовать метод коллапса начальной загрузки на соответствующем div.
Также $(".svgcircle").removeClass("fff-onfocus");
не удаляет класс, пока он не добавлен в другой круг.
Куда я иду не так? Большое спасибо.
UPDATE
Исправлен пустой массив путем перемещения идентификатора в круг вместо его ссылки.
По-прежнему работает над .collapse (), не является проблемой функции.