流星和可折叠不工作

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 
    }); 
} 

与我得到了科目termlist中这个：

<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 
    });