此处的完整代码：https://plnkr.co/edit/6TTLVcsXLV7C1qXSMQV0?p=preview
我在这里有一个带角度的ui引导手风琴（每个重复的面板都有一个嵌套的手风琴）：
<uib-accordion close-others="oneAtATime">
<div ng-repeat="sub in subdivisions">
<div uib-accordion-group id="accordion" is-open="status.open"
class="outercontent" ng-repeat="prov in sub.province"
heading="{{prov.name}}">
<!-- INNER ACCORDION -->
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group id="inner-accordion" class="innercontent"
ng-repeat="dist in sub.district" heading="{{dist.name}}" >
<!-- ul of communes -->
</div>
</uib-accordion>
</div>
</div>
</uib-accordion>
在这里，我在svg元素周围有一组链接：
<svg height="300" width="425" id="svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="adrargroup" >
<a ng-click="clickOuter($event);" class="svgcircle big"><circle cx="50" cy="50" r="40" id="adrarouter" class="circle"/></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="adrarinner"><circle cx="50" cy="100" r="10" /></a>
<a ng-click="click($event)" class="svgcircle small" id="boudainner"><circle cx="50" cy="150" r="10" /></a>
<a ng-click="click($event)" class="svgcircle small" id="ouledahmedtimmiinner"> <circle cx="50" cy="200" r="10" /></a>
</g>
<g id="algiersgroup" >
<a ng-click="clickOuter($event)" class="svgcircle big"><circle cx="150" cy="50" r="40" id="algiersouter" class="circle"/></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="babelouedinner"><circle cx="150" cy="100" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="barakiinner"><circle cx="150" cy="150" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="birmouradraisinner"><circle cx="150" cy="200" r="10" /></a>
</g>
<g id="aindeflagroup" >
<a ng-click="clickOuter($event)" class="svgcircle big" ><circle cx="250" cy="50" r="40" class="circle" id="aindeflaouter" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="aindeflainner"><circle cx="250" cy="100" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="ainlechiakhinner"><circle cx="250" cy="150" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="bathiainner"><circle cx="250" cy="200" r="10" /></a>
</g>
<g id="chlefgroup" >
<a ng-click="clickOuter($event)" class="svgcircle big" ><circle cx="350" cy="50" r="40" id="chlefouter" class="circle"/></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="abouelhassaninner"><circle cx="350" cy="100" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="ainmeraneinner"><circle cx="350" cy="150" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="benihaouainner"><circle cx="350" cy="200" r="10" /></a>
</g>
</svg>
我想要实现的是单击每个链接时，手风琴中目标链接的匹配div打开。
我试图通过在点击时触发此功能来做到这一点：
$scope.clickOuter = function(e) {
var targetcircle = e.target;
for(i=0; i<circle.length; i++) {
circle[i].classList.remove("fff-onfocus");
}
targetcircle.classList.toggle("fff-onfocus");
var targetcontent = document.querySelectorAll('.' + targetcircle.getAttribute("id"));
targetcontent = Array.prototype.slice.call(targetcontent);
for(i=0; i<targetcontent.length; i++) {
targetcontent[i].setAttribute("is-open", "!status.open");
}
};
函数的这一部分：
var targetcontent = document.querySelectorAll('.' + targetcircle.getAttribute("id"));
targetcontent = Array.prototype.slice.call(targetcontent);
for(i=0; i<targetcontent.length; i++) {
targetcontent[i].setAttribute("is-open", "!status.open");
}
获取目标圆的ID并获取匹配的div。然后，它将is-open（默认值= false）属性的值更改为!status.open（true）。
但是，当我测试它时，它不能完全正常工作。我单击链接，它返回匹配的div并更改is-open属性的值，但手风琴中的div实际上没有打开或关闭。
（在此https://plnkr.co/edit/M6ZjYSlzgmDQYXFzOurD?p=preview插件示例中，可以通过将status.open为true来切换最后一个面板）
我的第二个问题是这部分：
for(i=0; i<circle.length; i++) {
circle[i].classList.remove("fff-onfocus");
}
targetcircle.classList.toggle("fff-onfocus");
是在单击另一个圆圈时将其从一个圆圈中删除，但不允许您在再次单击时切换所选的那个圆圈。
所以有2个问题：
任何帮助将不胜感激。谢谢。
修改 尝试了这个但仍然无法正常工作：
$scope.state = {};
$scope.state.isclosed = false;
$scope.state.isopen = true;
div属性：is-open="state.isclosed"，内部函数：targetcontent[i].setAttribute("is-open", "state.isopen");
答案 0 :(得分：1)
花了一些时间，但我能够使其以AngularJS的方式工作，而不是您尝试的hack（^ _ ^）
<svg height="300" width="425" id="svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="adrargroup-{{$index}}" ng-repeat="sub in subdivisions">
<a ng-click="clickOuter(prov);" ng-repeat="prov in sub.province" class="svgcircle big">
<circle ng-attr-cx="{{prov.cx}}" ng-attr-cy="{{prov.cy}}" r="40" class="circle"/>
</a>
<a ng-repeat="dist in sub.district" ng-click="clickInner(dist)" class="svgcircle small" >
<circle ng-attr-cx="{{dist.cx}}" ng-attr-cy="{{dist.cy}}" r="10" class="circle"/>
</a>
</g>
</svg>
我对$scope.subdivisions进行了如下修改：
{
province: [{
name: 'Adrar',
namealt: 'adrarouter',
population: '123',
open: false,
cx: 50,
cy: 50
}],
district: [{
name: 'Adrar',
namealt: 'adrarinner',
population: '1234',
open: false,
cx: 50,
cy: 100
},
{
name: 'Bouda',
namealt: 'boudainner',
population: '1234',
open: false,
cx: 50,
cy: 150
},
{
name: 'Ouled Ahmed Timmi',
namealt: 'ouledahmedtimmiinner',
population: '1234',
open: false,
cx: 50,
cy: 200
}
]
}
下一步您需要做什么：
open，cx和cy值的函数province的数组，而不是我如何快速修复$scope.subdivisions[index].province[0] $scope.clickOuter = function(e) {
var index = $scope.subdivisions.findIndex(function(obj){
return obj.province[0].name === e.name;
})
$scope.subdivisions[index].province[0].open = !$scope.subdivisions[index].province[0].open;
};
$scope.clickInner = function(e) {};中写类似的逻辑