Twig-Template Inkrement
Eingetragen von kchristm (1)am 29.12.2022 - 15:48 Uhr in
Hallo,
in meinem mobilen Menü mit mehreren Levels arbeite ich mit Accordion-Elementen, um die Submenüs aufklappen zu lassen. Ich möchte mein mobiles Menü nur mit CSS und ohne Javascript umsetzen. Daher arbeite ich mit unsichtbaren checkboxen und Label-Elementen.
Für mein mobiles Menü habe ich ein eigenes Twig-Template erstellt. Den Code dafür habe ich unten hinzugefügt.
Nun ist es so, dass ich an einer Stelle noch einen Fehler habe, bzw. dass an einer Stelle ein Inkrement fehlt. Meine ersten Label- und Input-Elemente haben die ID cbox-1 und das erste Element in der Ebene darunter auch die ID cbox-2. Leider haben aber alle Elemente in der zweiten Ebene die ID cbox-2.
Der Fehler wird wohl an dieser Stelle meines Codes liegen:
{% if item.below %}
<input class="accordionCheckbox" type="checkbox" style="display:none;"
{{ item.attributes.setAttribute('id', 'cbox-' ~ cbox_level) }}>
<label class="menuAccordion__label" {{ item.attributes.setAttribute('for', 'cbox-' ~ cbox_level) }}>
</label>
{{ menus.menu_links(item.below, attributes, menu_level + 1, cbox_level += 1) }}
{% endif %}Was muss ich ändern, dass der cbox-level richtig hochgezählt wird und mein nächtses li-Element mit Child-Elementen auch die richtige ID hat?
Hier der ganze Code:
{{ menus.menu_links(items, attributes, 1, 1) }}
{% macro menu_links(items, attributes, menu_level, cbox_level) %}
{% import _self as menus %}
{% if items %}
{% if menu_level == 1 %}
<ul{{ attributes.addClass('menu') }}>
{% elseif menu_level == 2 %}
<ul class="menu-level-2">
{% elseif menu_level == 3 %}
<ul class="menu-level-3">
{% else %}
<ul class="menu">
{% endif %}
{% for item in items %}
{%
set classes = [
'menu-item',
'item-level-' ~ menu_level,
item.is_expanded ? 'menu-item--expanded',
item.is_collapsed ? 'menu-item--collapsed',
item.in_active_trail ? 'menu-item--active-trail',
item.below ? 'menu-item--has-children',
]
%}
<li{{ item.attributes.addClass(classes) }}>
{{ link(item.title, item.url) }}
{% if item.below %}
<input class="accordionCheckbox" type="checkbox" style="display:none;"
{{ item.attributes.setAttribute('id', 'cbox-' ~ cbox_level) }}>
<label class="menuAccordion__label" {{ item.attributes.setAttribute('for', 'cbox-' ~ cbox_level) }}>
</label>
{% menu_level = menu_level + 1 %}
{{ menus.menu_links(item.below, attributes, menu_level + 1, cbox_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}<li class="menu-item item-level-1 menu-item--expanded menu-item--has-children">
<span title="Datenbanken, Listen, Anleitungen...">Infos</span>
<input class="accordionCheckbox" type="checkbox" style="display:none;" id="cbox-1">
<label class="menuAccordion__label" id="cbox-1" for="cbox-1">
</label>
<ul class="menu-level-2">
<li class="menu-item item-level-2 menu-item--expanded menu-item--has-children">
<span title="Anleitungen">Anleltungen</span>
<input class="accordionCheckbox" type="checkbox" style="display:none;" id="cbox-2">
<label class="menuAccordion__label" id="cbox-2" for="cbox-2">
</label>
<ul class="menu-level-3">
<li class="menu-item item-level-3">
<span title="Emulation">Emulation</span>
</li>
<li class="menu-item item-level-3">
<span title="Handheld-Geräte">Handheld-Geräte</span>
</li>
<li class="menu-item item-level-3">
<span title="Raspberry Pi">Raspberry Pi</span>
</li>
<li class="menu-item item-level-3">
<span title="Hardware-Modding">Hardware-Modding</span>
</li>
<li class="menu-item item-level-3">
<span title="Retro-Gaming">Retro-Gaming</span>
</li>
</ul>
</li>
<li class="menu-item item-level-2 menu-item--expanded menu-item--has-children">
<span title="Datenbanken">Datenbanken</span>
<input class="accordionCheckbox" type="checkbox" style="display:none;" id="cbox-2">
<label class="menuAccordion__label" id="cbox-2" for="cbox-2">
</label>
<ul class="menu-level-3">
<li class="menu-item item-level-3">
<a href="/listen/handheld-liste" data-drupal-link-system-path="node/26">Handheld-Liste</a>
</li>
<li class="menu-item item-level-3">
<span title="TODO">Romhacks</span>
</li>
<li class="menu-item item-level-3">
<span title="TODO">Homebrew-Spiele</span>
</li>
</ul>
</li>
<li class="menu-item item-level-2 menu-item--expanded menu-item--has-children">
<span title="Listen">Listen</span>
<input class="accordionCheckbox" type="checkbox" style="display:none;" id="cbox-2">
<label class="menuAccordion__label" id="cbox-2" for="cbox-2">
</label>
<ul class="menu-level-3">
<li class="menu-item item-level-3">
<span title="Links">Links</span>
</li>
<li class="menu-item item-level-3">
<span title="Legale Bezugsquellen von Roms, Isos und sonstigen Spielen">Bezugsquellen von Roms</span>
</li>
<li class="menu-item item-level-3">
<span title="Online-Shops">Online-Shops</span>
</li>
</ul>
</li>
</ul>
</li>- Anmelden oder Registrieren um Kommentare zu schreiben
Neue Kommentare
vor 1 Woche 15 Stunden
vor 1 Woche 22 Stunden
vor 1 Woche 1 Tag
vor 1 Woche 2 Tagen
vor 1 Woche 2 Tagen
vor 7 Wochen 15 Stunden
vor 7 Wochen 3 Tagen
vor 7 Wochen 5 Tagen
vor 8 Wochen 19 Stunden
vor 8 Wochen 1 Tag