使用f：ajax（JSF）更新后，为什么我的Materialize可折叠菜单不起作用？

Question

我正在使用JSF 2.2和Materialize。 当用户使用h:form ， h:commandButton和f:ajax标签发送一种基本形式时，我需要更新可折叠的动态列表。

这是用户发送的表单代码：

<h:form>
    ...
    <h:commandButton value="send!" action="#{...}">
        <f:ajax render="@form pgMenu" execute="@form"/>
    </h:commandButton>
</h:form>

此代码表示要更新的菜单：

<h:panelGroup id="pgMenu">
    <ul class="collapsible myList">
        <h:panelGroup rendered="#{not empty bean.variable}">
            <li class="bold item-li"><a class="collapsible-header item-a">New</a>
                <div class="collapsible-body">
                    <ul>
                        <a href="page1.xhtml"><li class="li-izquierda">New 1</li></a>
                        <a href="page2.xhtml"><li class="li-izquierda">New 2</li></a>
                    </ul>
                </div>
            </li>
        </h:panelGroup>
        <li class="bold item-li"><a class="collapsible-header item-a">Fases</a>
            <div class="collapsible-body">
                <ul>
                    <a href="#"><li class="li-izquierda">Planeación</li></a>
                    <a href="#"><li class="li-izquierda">Otra mas</li></a>
                </ul>
            </div>
        </li>
        <li class="bold item-li"><a class="collapsible-header item-a waves-teal">JavaScript</a>
            <div class="collapsible-body">
                <ul>
                    <a href="#"><li class="li-izquierda">Collapsible</li></a>
                    <a href="#"><li class="li-izquierda">Dialogs</li></a>
                </ul>
            </div>
        </li>
    </ul>
</h:panelGroup>

我的问题是，更新pgMenu时，菜单js行为冻结。

下图显示了发送表单前后的菜单（我正在单击选项）。

更新之前

更新后

谢谢！

Answer 1

每次更新之后，您的DOM结构都会发生变化，因此您需要销毁Collapsible类的先前实例：

instance.destroy();

然后，在呈现新结构之后，您需要重新初始化Collapsible：

var newElement = document.getElementById('YOUR_COLLAPSIBLE_CONTAINER');
var instance = new M.Collapsible(newElement, {YOUR OPTIONS});

使用materialize-css库时，恐怕这是您唯一的选择。