Bootstrap 和 Angular - 手风琴切换不在标题上

Question

我的 Angular 应用中有一个基本的 Bootstrap 手风琴。

默认情况下，手风琴由“标题”触发。我希望能够为图标触发手风琴：

  <h4 class="panel-title">
    <a data-ng-click="selectItem()">
      <span class="glyphicon glyphicon-chevron-down" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></span>
      Collapsible Group Item #1
    </a>
  </h4>

这工作正常（在某种程度上），但它没有给我我正在寻找的结果。

在我的应用程序中，人们将能够通过单击标题来选择项目，而单击“触发器”将显示该特定项目的子项（而不是选择它）。

如果我保持原样保留代码，则在单击手风琴触发器后会选择该项目（我猜这是预期的结果）。

我正在寻找一种解决方案，以使项目可选择，同时保持手风琴（不会选择项目）。我试过使用 event.stopPropagation，但是当它阻止使用触发器选择项目时，手风琴不再起作用了。

Plunkr： http://plnkr.co/edit/GyuYP1sT6JWaZdLcTCS4?p=preview

有什么想法吗？

Answer 1

Plunker

将人字形移出“选择区域”，并创建了一个“标题栏”span，在hover 上突出显示粉色，click 上突出显示蓝色，而不会改变人字形箭头的颜色。

人字形箭头只影响手风琴，而标题栏只影响突出显示和选择。

这就是我对你想要什么的解释。如果我不在，LMK。

    <div sclass="" ng-class=" itemSelected ? 'item active' : 'item inactive'">
      <div class="acc-toggle">
        <a  class="glyphicon glyphicon-chevron-down" style="display: inline-block" 
          data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        </a>
      </div>
      <span class="title-bar" data-ng-click="selectItem()"  sng-class="{ 'active': itemSelected,  'inactive': itemSelected==false  }" >
        Collapsible Group Item #1
      </span>
    </div>

让span 孩子在hover 上变成粉红色，在click 上变成蓝色

.acc-toggle {
  background-color: 
  white; display: inline-block ; 
  padding: 5px;
}

.title-bar {
  display: inline-block;
  padding: 5px;
  width: 90%;
}
.item {
  white-space: nowrap;
  border: 1px solid gray;
  width: 100%;
}
.item span {
  display: inline-block;
}
.item.active {
  background: blue;
}
.item.active:hover  {
  background: blue;
}
.item.inactive:hover  {
  background: pink;
}