javascript - 流星和可折叠不工作

Question

我目前正在为我的项目使用 Meteor + materializecss 包。

我有一个导航，其中包含一个可折叠项目（每个学期）和一个可折叠项目（在学校），除以学期。

不知何故，可折叠的工作不正常。我不知道为什么以及如何解决这个问题。

演示在这里： http: //marky.meteor.com

我得到以下导航的html代码：

<template name="navigation">
  <header>
    <nav class="top-nav">
      <div class="container">
        <div class="nav-wrapper">
          <a class="page-title">{{pageTitle}}</a>
        </div>
      </div>
    </nav>

    <div class="container">
      <a href="#" data-activates="nav-mobile" class="button-collapse top-nav full"><i class="mdi-navigation-menu"></i></a>
    </div>

    <ul id="nav-mobile" class="side-nav fixed">
      <li class="logo">
        <a id="logo-container" href="{{pathFor 'features'}}" class="brand-logo"><img src="/img/logo.png" width="100"></a>
      </li>
      <li>
        <a href="{{pathFor 'dashboard'}}"><i class="mdi-action-dashboard right"></i>Dashboard</a>
      </li>
      <li>
        <a href="{{pathFor 'account'}}"><i class="mdi-action-account-box right"></i>Account</a>
      </li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li><a href="#" class="collapsible-header"><i class="mdi-action-assignment right"></i>Your grades</a>
            <div class="collapsible-body">
              <ul>
                {{#each terms}}
                  <li><a href="{{pathFor 'termList'}}">{{term}}</a></li>
                {{/each}}
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </header>
</template>

和javascript文件：

Template.navigation.rendered = function () {
    $('.collapsible').collapsible({
      accordion : false
    });
}

对于我得到这个主题的术语表：

<template name="termList">  
  <div class="row">
    <div class="col s12">
        <ul class="collapsible colterm" data-collapsible="expandable">
            {{#each modules}}
                {{> moduleItem}}
            {{/each}}
        </ul>
    </div>
  </div>  
</template>

js：

Template.termList.rendered = function(){
    $('.collapsible').collapsible({
        accordion : false
    });
}

如果有人需要整个代码，我可以发布我的 git 项目。

问候

Answer 1

这是因为您是collapsible两个不同项目的同一个选择器类。

这是可折叠的 js 调用第一次调用它正在初始化的同一个选择器类，第二次调用它正在销毁它。

您需要为两个不同的项目提供不同的选择器，并相应地调用 javascript。

对于第一个可折叠项目-

  $('.collapsible-item1').collapsible({
      accordion : false
    });

对于第二个可折叠项目-

  $('.collapsible-item1').collapsible({
      accordion : false
    });