单击标题而不是标题时打开手风琴面板

Question

我发现这个 stackoverflow 问题看起来与我遇到的问题相同。这是 Angular ui-bootstrap 手风琴的默认行为，仅当您单击面板标题而不是面板上的其他任何位置时才会打开。

ng-click on accordion panel header

当一次单击面板然后单击标题时，所提供的解决方案似乎不同步。有时您必须单击两次才能使其重新同步。我在文档中注意到了这个 sn-p，要在手风琴中使用可点击元素，您已经覆盖了手风琴组模板以使用 div 元素而不是锚元素，并在 CSS 中添加 cursor:pointer。

有人可以提供使用 div 标签代替锚元素的示例吗？

Answer 1

您必须为accordion-group 自定义模板以使用可点击链接，否则会触发意外路由。您可以修改模板如下：

    <script id="uib/template/accordion/accordion-group.html" type="text/ng-template">

                <div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="" ng-keypress="toggleOpen($event)">

                    //this is previously <a role="tab"> - replace it with div
                    <div role="button" style="border-top:1px solid #e6e6e6" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}"
                         tabindex="0" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled"
                         uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span>
                    </div>

                </div>
                <div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel"
                     class="panel-collapse collapse" uib-collapse="!isOpen">
                    <div class="" ng-transclude></div>
                </div>
            </script>

您可以将此模板放在您使用手风琴的视图中。这将覆盖来自 angular ui bootstrap tpls 库的默认 accordion-group 模板。