如何在 Materialise CSS 中有多个下拉菜单？答案

【问题标题】：How to have more than one dropdown in Materialize CSS?如何在 Materialise CSS 中有多个下拉菜单？
【发布时间】：2017-07-07 12:54:52
【问题描述】：

我目前正在使用 OpenCart 3 并使用 Materialize 0.99.0。但是我在主菜单上的下拉菜单中遇到了问题。我需要在其中包含多个下拉列表，但要注意的是它都是正在生成的。查看 Materialize 上的下拉菜单代码如下：

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

所以基本上我需要的是 Materialize 可以转换为不使用 ID，但其他一些不必是唯一但仍然有效的东西，或者我需要一个为每个循环生成唯一 ID 并放置 ID 的函数在那里。

我真的需要你的帮助，我不敢相信我在互联网上找不到任何关于它的信息。我怎么会是唯一遇到这个问题的人？

【问题讨论】：

标签： opencart materialize

【解决方案1】：

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

【讨论】：