Javascript 设置热键以便在不使用widgetVar的情况下折叠面板

我试图找出如何调用

toggle（）

方法，方法是使用面板上的Tab键和加号，然后按键盘上的空格键。假设我有多个面板，并且不能使用

widgetVar

属性

<ui:composition
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui">

   <p:panel
        header="panel-1"
        id="panel-1"
        toggleable="true"
        collapsed="true">
   </p:panel>

  <p:panel
        header="panel-2"
        id="panel-2"
        toggleable="true"
        collapsed="true">
   </p:panel>

</ui:composition>

---

面板中的“按钮”已经能够对焦。只是PrimeFaces主题最有可能阻止显示的轮廓。这是因为它增加了

a {
    outline: 0;
} 

通过在browser developer工具中检查页面/css可以看出。这是一种通用的html（因此与jsf无关）方法，用于在关注组件时删除“大纲”。要恢复此设置，请再次将宽度设置为1px，并仅使用更具体的css选择器（如）对面板标题栏图标执行此操作

a.ui-panel-titlebar-icon:focus {
    outline-width: 1px;
}

默认的“热键”已经存在于他们身上，它是回车键。如果要添加空格，请在右侧组件上添加一个简单的jquery eventhandler（css选择器与上面的css中相同），检查空格键是否被按下，并向其添加“单击”，不要忘记防止事件冒泡并触发默认的avent。然后你会得到：

$('a.ui-panel-titlebar-icon').on('keydown', function(event) {
    if (event.keyCode == 32) {
        event.target.click();
        event.preventDefault()
    }
})

由于-变为+并且焦点保持不变，您将自动获得一个“切换”

我在PrimeFaces showcase中在线测试了这一点，效果很好！最后，它只是css、html和javascript（在jquery的帮助下）

另请参见：

---

哇。。。4小时内投4票。。。酷…；-）在我的情况下，大纲设置正确。谢谢你帮了我，这很有效：）