Javascript 为什么我的物化可折叠菜单没有'；在使用f:ajax（JSF）进行更新后是否仍不能工作？

我正在使用JSF2.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

时，菜单行为冻结

接下来的图像显示发送表单前后的菜单（我正在单击“选项”）

更新前

更新后

---

谢谢大家!

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

instance.destroy();

然后，在渲染新结构后，需要重新初始化可折叠：

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

---

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

页面加载后是否执行一些额外的javascript/jquery？组件更新后，似乎会丢失其javascript行为。