0

現在、プロジェクトに 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 プロジェクトを公開できます。

ご挨拶

4

1 に答える 1

0

これは、collapsible2 つの異なるアイテムに対して同じセレクター クラスであるためです。

これは、折りたたみ可能な js 呼び出しであり、初期化中の同じセレクター クラスで初めて呼び出しを行い、2 回目はそれを破棄しています。

2 つの異なる項目に異なるセレクターを指定し、それに応じて JavaScript を呼び出す必要があります。

最初の折りたたみ可能なアイテムの場合-

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

2 つ目の折りたたみ可能なアイテムの場合 -

  $('.collapsible-item1').collapsible({
      accordion : false
    });
于 2015-02-10T14:59:18.150 に答える