Question

I have below html code for submenu. Now i have to integrate with my django application.

HTML代码：

<nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true" data-wheel-step="10">
                    <p class="nav-title">MENU</p>
                    <ul class="nav">
                        <!-- dashboard -->
                        <li>
                            <a href="a.html">
                                <i class="ti-home"></i>
                                <span>Dashboard</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="ti-support"></i>
                                <span>Category1</span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="SubCategory1.html">
                                        <span>Sub Category1</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="SubCategory2.html">
                                        <span>Sub Category2</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="fa fa-file-text-o"></i>
                                <span>Category2</span> 
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="SubCategory7.html">
                                        <span>SubCategory7</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                </nav>

我使用了简单菜单模块。但我不明白如何在下面的代码中的简单菜单中应用bootstarp类。对于这个子菜单，我必须使用simple-submenu？我试过简单菜单代码如下。

<nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true" data-wheel-step="10">
                    <p class="nav-title">MENU</p>
                    <ul class="nav">
                        {% for item in menu%}
                        <li>
                            <a href="{{ item.url }}">
                                <i class="ti-home"></i>
                                <span>{{ item.title }}</span>
                            </a>
                        </li>
                        <li>
                            <ul class="sub-menu">
                                {% for child in item.children%}
                                <li>
                                    <a href="{{ item.url }}">
                                        <span>{{ child.title }}</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- /ui -->
                </nav>

在上面的代码中，如何在for循环中为特定的html标记应用不同的类？

Answer 1

您可以使用随机生成的类或使用Django的cycle标记。

使用随机生成的类：

{% for item in menu%}
    <li>
        <a href="{{ item.url }}">
            <i class="ti-home-{{forloop.counter}}"></i>
            <span>{{ item.title }}</span>
        </a>
    </li>
...

使用周期代码：

{% for item in menu%}
    <li>
        <a href="{{ item.url }}">
            <i class="{% cycle "ti-home-1" "ti-home-2" "ti-home-3" "ti-home-end"%}"></i>
            <span>{{ item.title }}</span>
        </a>
    </li>
...

如何在django中使用简单菜单？

1 个答案: