@Fritkkov4ik1

Как создать условие вывода стрелочки в меню, проверка на то есть вложенность?

Есть меню создано на Dl menu js, у нас есть 3 уровня вложенности. В категории которая имеет вложенность есть значек ">" что соотвествует тому что она не конечная. Сообственно вопрос, как сделать проверку для 2 уровня вложенности , есть ли у него 3 уровень и тем самим выводить либо не выводить этот значек? Значек в коде имеет id=dlsublink
Код менюхи :
{% if categories %}
<div class="collection-flatten p-b-30 m-b-20">
    <div id="dl-menu" class="dl-menuwrapper">
        <ul class="dl-menu dl-menu dl-menuopen">
            {% for category in categories %}
                {% if category.children %}
                    <li>
                    <a href="{{ category.href }}">
                        <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 5px 10px 5px; border-bottom: 1px solid #e6e6e6">
                            <div style="width: 100%; font-size: 13px; letter-spacing: .3px; display: block">
          <span style="text-transform: uppercase;
          line-height: 23px; font-size: 11px; letter-spacing: 1px; color: #000; box-sizing: border-box">{{ category.name }}</span>
                            </div>
                            <div>
                                <img id="dlsublink" src="/catalog/view/theme/haircp/image/aizel-arrow-right.png">
                            </div>
                        </div>
                    </a>
                        <ul class="dl-submenu">
                            {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
                            {% for child in children %}
                                <li>
                                    <a href="{{ child.href }}">
                                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 5px 10px 5px; border-bottom: 1px solid #e6e6e6">
                                        <div style="width: 100%; font-size: 13px; letter-spacing: .3px; display: block">
                                            <span style="text-transform: uppercase; line-height: 23px; font-size: 11px; letter-spacing: 1px; color: #000; box-sizing: border-box">{{ child.name }}</span>
                                        </div>
                                        
                                       
                                            <div>
                                                <img id="dlsublink" src="/catalog/view/theme/haircp/image/aizel-arrow-right.png">
                                            </div>
                                      
                                    </div>
                                    </a>
                                    <ul class="dl-submenu">
                                        {% for child3 in child.children %}
                                            <li>
                                                <a href="{{ child3.href }}">
                                                <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 5px 10px 5px; border-bottom: 1px solid #e6e6e6">
                                                    <div style="width: 100%; font-size: 13px; letter-spacing: .3px; display: block">
                                                        <span style="text-transform: uppercase; line-height: 23px; font-size: 11px; letter-spacing: 1px; color: #000; box-sizing: border-box">{{ child3.name }}</span>
                                                    </div>
                                                </a>    
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </li>
                            {% endfor%}
                            {% endfor %}
                        </ul>
                    </li> 
                {% else %}
                    <li>
                        <a href="{{ category.href }}">
                            <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 5px 10px 5px; border-bottom: 1px solid #e6e6e6">
                                <div style="width: 100%; font-size: 13px; letter-spacing: .3px; display: block">
                                    <span style="text-transform:uppercase; line-height: 23px; font-size: 11px; letter-spacing: 1px; color: #000; box-sizing: border-box">{{ category.name }}</span>
                                </div>
                            </div>
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
</div>
{% endif %}
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы