Question

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

默认情况下，手风琴会被＆＃39;标题触发。我希望能够触发手风琴的图标：

  <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上突出显示蓝色，而不会改变雪佛龙箭头的颜色

V形箭头仅影响手风琴，而标题栏仅影响高光和选择。

这是我对你想要的解释。 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;
}

Bootstrap＆amp;角度 - 手风琴切换不在标题

1 个答案:

Plunker