ngb-bootstrap ngbPanelHeader 不打开 Accordion答案

【问题标题】：ngb-bootstrap ngbPanelHeader Doesn't Open Accordionngb-bootstrap ngbPanelHeader 不打开 Accordion
【发布时间】：2020-04-24 16:40:19
【问题描述】：

我正在寻找一种方法让ngbPanelHeader 触发ngb-accordion 中的内容打开/关闭。似乎手风琴要求标题是内容打开/关闭的触发器。

例如，如果<ngb-panel>（在<ngb-accordion> 内）中的<ng-template> 被赋予ngbPanelTitle 属性，它将成功触发手风琴打开/关闭其内容。但是，如果相同的<ng-template> 具有ngbPanelHeader 属性，则不会。

任何解决方法的建议将不胜感激！

跟进 Çağrı 的回答

我发现他的解决方案可以与非按钮元素一起使用，方法是将点击事件处理程序附加到运行手风琴的 toggle() 函数的元素，并将 <ng-panel> 元素的 id 作为参数传递到那个功能。我已经更新了 Stackblitz 以展示如何实现这一点。

【问题讨论】：

【解决方案1】：

https://stackblitz.com/edit/angular-te1eyn

ngbPanelTitle 可以作为 ng-bootsrap 的默认设置，对于您的自定义模板，您需要将 ngbPanelToggle 添加到您的元素中

 <button ngbPanelToggle >Panel Header That Doesn't Open Panel Content</button>

【讨论】：

【解决方案2】：

后续与WCAG recommendations for accordion 不一致。这意味着屏幕阅读器用户和其他有无障碍需求的用户很难使用它。

每个手风琴标题的标题都包含在具有角色按钮的元素中。

当 focus 位于折叠面板的折叠式标题上时，展开相关面板...

这些至少是使用按钮元素的两个原因。很可能还有更多。

根据经验 - 标签的语义总是一个很好的指导选择使用哪个元素。

【讨论】：