仅单击文本而不单击整个标题面板时如何扩展面板？答案

【问题标题】：How to expand panel when clicking ONLY on text and NOT on the entire header panel?仅单击文本而不单击整个标题面板时如何扩展面板？
【发布时间】：2018-07-23 08:41:53
【问题描述】：

我有一个简单的手风琴，为了展开/折叠每个面板，我想ONLY点击header text每个面板和整个面板标题上的 NOT。有谁知道如何做到这一点？

例如，如果我点击 Header 1 文本，我希望面板展开/折叠 这是我的代码：

PLUNKER

<p-accordion>
 <p-accordionTab header="Header 1">
   Content 1
 </p-accordionTab>
 <p-accordionTab header="Header 2">
    Content 2
 </p-accordionTab>
 <p-accordionTab header="Header 3">
    Content 3    
 </p-accordionTab>
</p-accordion>

【问题讨论】：

标签： angular typescript primeng

【解决方案1】：

一种方法是使用来自primeng SharedModule的自定义模板p-header：

<p-accordion>
    <p-accordionTab>
       <p-header>Header 1</p-header>
       Content 1
    </p-accordionTab>
    <p-accordionTab>
       <p-header>Header 2</p-header>
        Content 2
    </p-accordionTab>
    <p-accordionTab>
        <p-header>Header 3</p-header>
        Content 3    
    </p-accordionTab>
</p-accordion>

现在您需要在全局 css 文件中添加一些规则：

.ui-accordion-header {
  pointer-events: none;
}

.ui-accordion-header p-header {
  pointer-events: auto;
}

Forked Plunker

【讨论】：

如果我还想在单击标题文本时提醒消息怎么办？我的意思是，是否可以创建一个在单击标题文本时会触发的函数？示例：调用函数 myFunction() 将执行 alert('testing')
更新插件
@yurzuu 是否可以在标题面板 1 上添加一个按钮（例如：myButton），以便当您单击它时它会调用 myFunction2 并执行如下消息：alert('testing button') ？非常感谢！
更新了插件。你可以检查一下。但似乎它与您最初的问题和角度无关