使 UI Bootstrap 手风琴标题完全可点击区域

Question

我有一个 UI Bootstrap 手风琴，我希望它的标题是完全可点击的，而不仅仅是像默认行为那样的标题。

<accordion class="fda-accordion panel-group panel-group-square" close-others="oneAtATime">
    <accordion-group is-open="fdaClass1Open" ng-show="fdaRecallsClass1Count">
            <accordion-heading>
                <div class="panel-heading-blue">
                    <i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaClass1Open, 'fa-plus': !fdaClass1Open}" style="margin-right:10px"></i>
                    FDA Class 1 Recalls ({{fdaRecallsClass1Count}})
                </div>
            </accordion-heading>            
        {{fdaRecallsClass1Content}}
    </accordion-group>
</accordion>

是否有一些解决方法？

Answer 1

问题是处理切换的锚点环绕在 header 文本而不是 div 周围。为了将可点击区域扩展到 div 之外，我会将标题内容设置为负边距并匹配与标题 panel 的填充值相对应的正填充。

例如，假设您的 panel-heading 上的填充是 9px 15px，您的 panel-heading-blue class[= 中会有以下 css 17=]

.panel-heading-blue{
    margin: -9px -15px; 
    padding: 9px 15px;
}

使 UI Bootstrap 手风琴标题完全可点击区域

Make UI Bootstrap accordion heading fully clickable area

angularjs

angular-ui-bootstrap