Question

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

当一次单击面板然后单击标题时，显示的解决方案似乎不同步。有时您必须单击两次才能使其同步。我注意到文档上的这个片段，要在手风琴中使用可点击元素，你已经覆盖了accordion-group模板以使用div元素而不是anchor元素，并在CSS中添加了cursor：pointer。 < / p>

有人可以提供使用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模板。

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

1 个答案: