jquery - 如何制作 p :panel collapsible by clicking on header?

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 支持此行为-属性:

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