Comment avoir plus d'une liste déroulante dans Materialise CSS?

Question

Je travaille actuellement sur OpenCart 3 et sur Materialize 0.99.0. Mais j'ai rencontré un problème avec les listes déroulantes sur mon menu principal. J'ai besoin de plus d'une liste déroulante, mais le fait est que tout est généré. En regardant le code pour dropdowns sur Materialise il va comme ceci:

<!-- 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> 

Si je mets dans mon modèle de OpenCart utilise ID du « Dropdown1 » pour chaque menu déroulant qui bien sûr ne fonctionnera pas. Comment puis-je résoudre ceci?

Le code OpenCart va comme ceci:

{% 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 %} 

Donc, fondamentalement, ce que je dois que soit Materialise peut être converti à ne pas utiliser les ID, mais quelque chose d'autre qui ne doit pas être unique, mais fonctionne toujours ou J'ai besoin d'une fonction qui génère un identifiant unique pour chaque boucle et y mette l'ID.

J'ai vraiment besoin de votre aide pour cela et je ne peux pas croire que je ne trouve rien à ce sujet sur Internet. Comment puis-je être le seul à rencontrer ce problème?

Answer 1

J'ai réussi à le résoudre avec l'aide d'un bon ami sur Twitch. Ce que nous avons fait, c'est de définir une valeur 'I' et de laisser cet incrément pour chaque boucle, puis de l'imprimer en conséquence dans 'Data Activates' et 'ID'.

Le code pour la menu.twig se présente comme suit maintenant:

{% 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 %}