Javascript 自举&x2B；AngularJS+；jQuery-嵌套面板“；“崩溃”；行为失败

我正在尝试嵌套手风琴

面板

，效果很好。但是，我希望

面板主体

折叠时

V形图标

向下（

fa V形向下

）并在

面板主体

未折叠时指向右侧。我编写了一个

指令

来获得这种效果，它也能起作用。但是，当我将此指令应用于

嵌套面板

时，它会对

嵌套面板

和

父面板标题

产生效果。我做错了什么？有没有更干净的方法

（函数（）{
"严格使用",；
有棱角的
.module（'myApp'，[]）
.指令（'bsCollapse'，bsCollapse）；
函数bsCollapse（）{
var$=窗口。$；
var指令={
限制：“EA”，
链接：linkFunc，
};
返回指令；
函数linkFunc（范围、el、属性、ctrl）{
$（el[0]）
.on（'hide.bs.collapse'，函数（evt）{
$（evt.currentTarget）
.prev（）
.儿童（）
.儿童（）
.removeClass（'fa-chevron-down'）
.addClass（'fa-chevron-right'）；
})
.on（'show.bs.collapse'，函数（evt）{
$（evt.currentTarget）
.prev（）
.儿童（）
.儿童（）
.removeClass（'fa-chevron-right'）
.addClass（“fa-chevron-down”）；
});
}
}
})();

父面板标题
嵌套面板标题
嵌套面板主体。。。。
两个面板中的图标都会受到影响，因为$on事件在两个元素中同时触发。我已经编辑了您的代码，并在脚本中添加了几行代码，并且使用了angularjs的ng类，这非常简单。这是一只扑克牌。希望能有帮助

scipt.js：

scope.flag1 = true;
scope.flag2=true;
scope.parentDiv = function() {
  scope.flag1 = !scope.flag1;
};
scope.nestedDiv = function() {
  scope.flag2= !scope.flag2;
};

HTML:


父面板标题
嵌套面板标题
我找到了一个CSS解决方案。谢天谢地，
Bootstrap
将一个
折叠的
类抛出到
面板标题
。从那里，我可以添加这种样式，它将
V形右
添加到
：before
伪类。
此外，这不需要指令或AngularJS代码

感谢您的参考：



div.panel-heading i{
位置：相对位置；
}
分区面板标题i：之前{
内容：“\f054”；
字体系列：Fontsome；
}

父面板标题
嵌套面板标题
嵌套面板主体。。。。
谢谢。但是，这个解决方案不适合我，主要是因为快速单击，
类名就会失控。。。
<h4 class="panel-title">
   PARENT PANEL HEADING
<i ng-class="{'fa fa-chevron-down': flag1, 'fa fa-chevron-right': !flag1}" class="pull-right"></i>
        </h4>

<h4 class="panel-title">
   NESTED PANEL HEADING
 <i ng-class="{'fa fa-chevron-down': flag2, 'fa fa-chevron-right': !flag2}" class="pull-right"></i>
                </h4>