Question

我目前正在使用OpenCart 3并使用Materialise 0.99.0。但是我的主菜单上的下拉菜单遇到了问题。我需要有一个以上的下拉列表，但问题是它都是生成的。查看Materialise下拉列表的代码，如下所示：

  <!-- 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的函数那里。

我真的需要你的帮助，我无法相信我在互联网上找不到任何关于它的东西。我怎么能成为遇到这个问题的唯一一个人？

Answer 1

我设法在Twitch的一位好朋友的帮助下解决了这个问题。我们所做的就是设置一个＆＃39; I＆＃39;值并让每个循环的增量然后在“数据激活”中相应地打印出来。和＆＃39; ID＆＃39;。

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

如何在Materialise CSS中有多个下拉列表？

1 个答案: