流星和可摺疊不工作

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