如何在Materialise CSS中有多個下拉菜單？

我目前在OpenCart 3中使用Materialise 0.99.0。但我遇到了我的主菜單上的下拉菜單的問題。我需要在其中有多個下拉菜單，但問題在於它是全部生成的。縱觀上Materialise的下拉列表中選擇代碼它是這樣的：如何在Materialise CSS中有多個下拉菜單？

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

所以基本上我需要的是，要麼Materialise的可轉換爲不使用的ID，但別的東西，並不一定是唯一的，但仍然有效或我需要一個函數爲每個循環生成一個唯一的ID，並將ID放在那裏。

我真的需要你的幫助，我不能相信我在互聯網上找不到它。我怎麼能成爲唯一遇到這個問題的人？

來源

2017-07-07 chainboost

我在Twitch的一位好朋友的幫助下設法解決了這個問題。我們所做的是我們設置一個'I'值並讓每個循環的增量值相應地在'數據激活'和'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 %}

來源

2017-07-08 19:01:29 chainboost

如何在Materialise CSS中有多個下拉菜單？

回答

相關問題