Javascript 选择节点时展开div

我有一个基本的p:树，它可以从数据库中可视化组件。我想以这种方式展开树：

当我选择一个节点时，我想打开组件下面的div层，并将此组件的附加数据显示为图片。到目前为止，我编写了以下JSF代码：

<h:form>
    <p:growl id="growl1" showSummary="true" showDetail="true" cached="true" autoUpdate="true"/>
    <p:tree id="tree" styleClass="treeskin" value="#{TreeViewController.root}" var="node" dynamic="true" animate="true"
            selectionMode="single"  selection="#{TreeViewController.selectedNode}" highlight="true">

        <p:ajax event="select" listener="#{TreeViewController.onNodeSelect}"/>
        <p:ajax event="expand" listener="#{TreeViewController.onNodeExpand}" />
        <p:ajax event="collapse" listener="#{TreeViewController.onNodeCollapse}" />

        <p:treeNode styleClass="treeskin">
            <h:outputText value="#{node}"/>
        </p:treeNode>
    </p:tree>

</h:form>

---

这可能吗？

您可能正在查找属性设置为true的

p:outputPanel

标记。如果没有，只需将

p:outputPanel

放在右侧框架中，并根据所选节点以友好方式呈现其内容。但我认为按你想要的方式破坏树只是让它复杂化的一种方式。请你给出一些示例代码好吗？

@XtremeBiker我用位于浏览器右侧的div layer做了一个示例。但我感兴趣的是如何将div层直接插入到树中，并在单击树节点时展开它。我知道，我给了你一个简单的替代方法来做类似的事情。请注意，
p:treeNode
是一个预构建的组件，做您想要做的事情需要创建您自己的组件来扩展它，或者通过复杂的javascript在客户端对其进行修改。请参阅本指南以自定义组件