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

流星和可折叠不工作

1 个答案: