如何关闭 p:accordionPanel 单击按钮

Question

我用来输入地址字段。默认情况下设置 active-index="-1"，以便在加载页面时面板将关闭。用户输入详细信息后，我想要面板区域，这意味着我想要手风琴面板要在按钮（保存）单击上关闭。但是我使用java脚本尝试了很多，但无法实现，这是页面

<h:body>
    <ui:composition template="/WEB-INF/templates/layout.xhtml">
        <ui:define name="content">
        <h:form id="quotesForm">
                <div class="headerbg">
                    <div id="innerheaderbg">
                        <div id="iconarea">
                            <img src="#{request.contextPath}/images/headerimages/productlist.png" />
                        </div>
                        <div id="headertextarea">
                            <p class="headingtext">New Quote</p>
                            <p id="breadCrumbtext">Order &#160;<img src="#{request.contextPath}/images/error-bullet.gif" />
                                &#160;Quote List &#160;<img src="#{request.contextPath}/images/error-bullet.gif" />
                                &#160;New Quote
                            </p>
                        </div>

                    </div>
                </div>
            <p:growl id="msgs" />


             <div class="widget widget-table action-table">
                <div class="widget-header" style="text-align:center;padding-top: 52px">
                    <h3>Create New Quote</h3>
                </div>  

                <div class="widget-content" style="background-color: #DAEDF4;height: 600px;"  >
                    <div id="calender" style="margin-left: 52px;margin-top: -26px">
                        <table>
                            <tr>
                            <td>
                            <p:outputLabel id="qDate" value="#{quotesBean.qtCreationDate}"></p:outputLabel>
                            </td>
                            <td>
                            <p:calendar id="popup" showOn="button" display="inline" >
                                <p:ajax event="dateSelect" listener="#{quotesBean.onDateSelect}" update="qDate" />
                            </p:calendar>
                            </td>
                            </tr>
                        </table>
                        <p:outputLabel value="Invoice # #{quotesBean.qCount}" style="margin-top:-15px;margin-left:10px;"/>
                    </div>

                <div id="company">
                    <table align="right" style="margin-right: 52px">
                        <thead>
                            <tr>
                            <th style="text-align: center;padding: 0;"><img src="#{request.contextPath}/images/favicon.ico"/><p:spacer width="5px"/>SolvEdge</th>
                            </tr>                   
                        </thead>
                        <tr><td style="text-align: center;padding: 0;">Zameen Pallavaram,</td></tr>
                        <tr><td style="text-align: center;padding: 0;">Chennai,</td></tr>
                        <tr><td style="text-align: center;padding: 0;">INDIA</td></tr>
                    </table>
                </div>
                <h:form id="addForm">
                 <p:accordionPanel id="accordion" cache="false" activeIndex="-1" style="margin-bottom:20px;width:330px;" widgetVar="acc" >
                    <p:tab title="Bill To Address:" titleStyle="width:330px;background-color:#DAEDF4"  >
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Name" />  
                            <h:inputText value="#{quotesBean.name}"/>

                            <h:outputLabel value="Street" />  
                            <h:inputText value="#{quotesBean.street}"/>  

                            <h:outputLabel value="City" />  
                            <h:inputText value="#{quotesBean.city}"/>  

                            <h:outputLabel value="ZIP" />  
                            <h:inputText value="#{quotesBean.zip}"/>  
                        </h:panelGrid>
                        <p:commandButton icon="ui-icon-save" value="Save" action="#{quotesBean.saveAddress}" update=":quotesForm:addForm:accordion" ajax="false" onclick="PF('quotesForm:addForm:accordion').hide();"/>
                    </p:tab>
                </p:accordionPanel>
                </h:form>
                </div>  
            </div>
            <script type="text/javascript">
            var link = document.getElementById('quotesForm:popup_input');
            link.style.display = 'none'; 

            function closeAccordianPanel()
            {
                var panel = document.getElementById('quotesForm:addForm:accordion');
                link.style.activeIndex = '-1'; 
                /* PF('widget_accordion').unselect(0); */
            }

            </script>
            </h:form>
            <br></br>
        </ui:define>
    </ui:composition>
</h:body>
</html>

注意：我在这里尝试的Java脚本对我来说没有任何作用，我想在单击按钮时关闭手风琴面板。

Answer 1

我敢打赌你在控制台中有javascript错误...（

PF('quotesForm:addForm:accordion').hide();

是错误的，如果它完全有效的话应该是

PF('acc').hide();

（PrimeFaces文档中没有任何相关内容）。为什么要通过javascript关闭ui组件如果你执行一个'ajax =“false”'。并向你想要切换的选项卡发送一个点击事件，但更好的是使用官方客户端API：

PF('acc').unselect(...);

啊啊...命令按钮下面有额外的代码...但是有一个错误的 widgetVar 值...并且它被注释掉了...而另一部分不执行任何操作...

Answer 2

Unselect(tab 的索引)方法仅隐藏 p:tab。

如果你想隐藏你的accordionPanel，你可以使用rendered属性。

Answer 3

这是面板：

<p:panel id="toggleable" header="Toggleable" toggleable="true" 
                toggleOrientation="horizontal" toggleSpeed="500" closeSpeed="500" 
                widgetVar="panel" class="left-menu-panel" >
</p:panel>

以及折叠面板的按钮或命令链接

<p:commandLink styleClass="open-left-menu-button" 
                onclick="PF('panel').toggle()">
</p:commandLink>

您可以使用

toggleOrientation="horizontal/vertical"

进行设置。

普通面板 - 未折叠：

崩溃了：