如何通过单击标题使p：panel可折叠？

Question

我正在使用PrimeFaces 3.4可折叠面板。实际解决方案的问题在于，通过单击右侧的小按钮可以切换面板。它不是很符合人体工程学，用户希望通过单击标题上的任意位置进行切换。

这就是我要实现的：通过单击标题触发切换并删除切换按钮。这是我写的：

$('.ui-panel-titlebar').each(function(){
    var header = $(this);
    var widgetId = 'widget_' + header.attr('id').replace(/:/g, '_').replace(/_header$/, '');
    header.css('cursor', 'pointer');
    var toggler = header.find('a[id$=_toggler]');
    toggler.remove();
    header.click(function(){
        window[widgetId].toggle();
    });
});

但是我不喜欢这种解决方案，因为首先我猜到了JavaScript小部件ID，其次，我从DOM树中删除了已渲染的切换按钮，我希望根本不渲染它。

有没有一种方法可以在不编写太多代码的情况下以更优雅的方式实现相同的效果（因此，无需重写p:panel）？作为解决方案，可以使用基于与PrimeFaces（商业友好）相同的许可证的扩展。

Answer 1

从PrimeFaces 6.2开始，新的toggleableHeader-attribute 支持此行为：

<p:panel header="This is my header text"
         toggleable="true"
         toggleableHeader="true">
  The content of the panel.
</p:panel>