マテリアライズCSSで複数のドロップダウンを使用するにはどうすればいいですか？

Question

私は現在OpenCart 3で作業しており、Materialize 0.99.0を使用しています。 しかし、メインメニューのドロップダウンで問題が発生しました。私はそれに複数のドロップダウンを持っている必要がありますが、キャッチはそれがすべて生成されているということです。マテリアライズ上のドロップダウンのためのコードを見てみると、それはこのように書きます：

<!-- Dropdown Trigger --> 
    <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a> 

    <!-- Dropdown Structure --> 
    <ul id='dropdown1' class='dropdown-content'> 
    <li><a href="#!">one</a></li> 
    <li><a href="#!">two</a></li> 
    <li class="divider"></li> 
    <li><a href="#!">three</a></li> 
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li> 
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li> 
    </ul> 

私は私のOpenCartテンプレートでこれを入れた場合、それはもちろん動作しませんすべてのドロップダウンのための「Dropdown1」IDを使用しています。これをどうすれば解決できますか？ OpenCartで

コードは次のようになります：

{% if categories %} 
    {% for category in categories %} 
     {% if category.children %} 
      <li> 
       <a href="#" class="dropdown-button" data-activates="dropdown1">{{ category.name }}<i class="mdi mdi-menu-down"></i></a> 
       {% for children in category.children|batch(category.children|length/category.column|round(1, 'ceil')) %} 
        <ul id="dropdown1" class="dropdown-content"> 
         {% for child in children %} 
          <li><a href="{{ child.href }}">{{ child.name }}</a></li> 
         {% endfor %} 
         <li class="divider"></li> 
         <li><a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a></li> 
        </ul> 
       {% endfor %} 
      </li> 
     {% else %} 
      <li><a href="{{ category.href }}">{{ category.name }}</a></li> 
     {% endif %} 
    {% endfor %} 
{% endif %} 

だから、基本的に私は必要なものマテリアライズは、IDを使用しないように変換することができますどちらかということですが、ユニークである必要はありません何か他のものが、まだ動作しますか私はすべてのループのための一意のIDを生成し、そこにIDを置く関数が必要です。

私は本当にこれであなたの助けを必要とし、私はインターネット上でそれについて何も見つけることができないと信じることができません。この問題に遭遇しているのは、どうすれば唯一の人になれますか？

Answer 1

私はツイッチの親友の助けを借りてそれを解決することができました。 私たちは 'I'値を設定し、すべてのループに対してそのインクリメントをさせ、それに応じて 'Data Activates'と 'ID'にそれを表示します。

今、次のようにmenu.twigのコードが行く：

{% if categories %} 
{% for category in categories %} 
    {% if category.children %} 
     <li> 
      {% set i = i + 1 %} 
      <a href="#" class="dropdown-button" data-activates="{{ i }}">{{ category.name }}<i class="mdi mdi-menu-down"></i></a> 
      {% for children in category.children|batch(category.children|length/category.column|round(1, 'ceil')) %} 
       <ul id="{{ i }}" class="dropdown-content"> 
        {% for child in children %} 
         <li><a href="{{ child.href }}">{{ child.name }}</a></li> 
        {% endfor %} 
        <li class="divider"></li> 
        <li><a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a></li> 
       </ul> 

      {% endfor %} 
     </li> 
    {% else %} 
     <li><a href="{{ category.href }}">{{ category.name }}</a></li> 
    {% endif %} 
{% endfor %} 
{% endif %}