javascript - 具有不同 html 结构的 materializecss 可折叠面板

Question

我正在尝试使用 materialize 创建自定义可折叠面板，但我不知道为什么按钮没有触发并显示面板主体。我用我的自定义示例创建了一个 fiddle ，但该示例不起作用，并创建了一个其结构有效的实体化示例。

根据我的检查，我发现在单击面板标题时未在面板主体上添加事件类，这很奇怪。

所以，如果有人能帮我解决这个问题，请...修改具体化组件就像是一件让人头疼的事!

 <div class="collapsible">
    <div class="box">
      <div class="1left">Left</div>
      <div class="2center">Center</div>
      <div class="3right">Right
        <a class="collapsible-header">Colapse header</a>
      </div>
    </div>
  </div>
  <div class="collapsible-body">
    This should be the body collapsed
  </div

http://jsfiddle.net/zt5515zt/90/

Answer 1

在 Materialise 中，您需要在同一级别同时使用 collapsible-header 和 collapsible-body 才能使 Collapsible 正常工作。

只需如下所示更改collapsible-body 的级别即可。

<a class="collapsible-header">Colapse header</a>
<div class="collapsible-body">
  This should be the body collapsed
</div>

希望能帮到您解决问题。