Question

我正在使用OpenCart 3，Bootstrap 3.专注于以下几行：

<li><a href="#">Sản phẩm</a>
    {% for category in categories %}
        <ul class="list-unstyled dropdown">
            <a href="{{ category.href }}">{{ category.name }}</a>
        </ul>
    {% endfor %}
</li>

文件 menu.twig 的全部内容：

{% if categories %}
    <div class="container">
        <nav id="menu" class="navbar">
            <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
                <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Trang chủ</a></li>

                    <li><a href="#">Sản phẩm</a>
                        {% for category in categories %}
                            <ul class="list-unstyled dropdown">
                                <a href="{{ category.href }}">{{ category.name }}</a>
                            </ul>
                        {% endfor %}
                    </li>

                    <li><a href="#">Dịch vụ</a></li>
                    <li><a href="#">Tư vấn</a></li>
                    <li><a href="#">Công nghệ</a></li>
                    <li><a href="#">Tin tức</a></li>
                    <li><a href="#">Giới thiệu</a></li>
                    <li><a href="#">Tuyển dụng</a></li>
                    <li><a href="{{ contact }}">Liên hệ</a></li>

                    {#{% for category in categories %}#}
                        {#{% if category.children %}#}
                            {#<li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle"#}
                                                    {#data-toggle="dropdown">{{ category.name }}</a>#}
                                {#<div class="dropdown-menu">#}
                                    {#<div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}#}
                                            {#<ul class="list-unstyled">#}
                                                {#{% for child in children %}#}
                                                    {#<li><a href="{{ child.href }}">{{ child.name }}</a></li>#}
                                                {#{% endfor %}#}
                                            {#</ul>#}
                                        {#{% endfor %}</div>#}
                                    {#<a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a>#}
                                {#</div>#}
                            {#</li>#}
                        {#{% else %}#}
                            {#<li><a href="{{ category.href }}">{{ category.name }}</a></li>#}
                        {#{% endif %}#}
                    {#{% endfor %}#}



                </ul>
            </div>
        </nav>
    </div>
{% endif %}

菜单无法自动折叠，并且显示不正确。

如何修理菜单？

Answer 1

修复下拉菜单替换：

for key1, val1 in d.items():
    if isinstance(val1, dict):
        for key2, val2 in val1.items():
            # do what you need with inner dict key/vals here
    else:
        # do what you need with total key/val here

使用：

<li><a href="#">Sản phẩm</a>
  {% for category in categories %}
  <ul class="list-unstyled dropdown">
    <a href="{{ category.href }}">{{ category.name }}</a>
  </ul>
 {% endfor %}
</li>

它没有崩溃，因为您的崩溃代码看起来不对。您必须更换＆＃34; navbar-header＆＃34; class div with：

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Sản phẩm
  <span class="caret"></span></a>
  <ul class="dropdown-menu">
  {% for category in categories %}
    <li><a href="{{ category.href }}">{{ category.name }}</a></li>
    {% endfor %}
  </ul>
</li>

查看文档。向下滚动到＆＃34;折叠导航栏＆＃34;。

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Bootstrap 3菜单：不下拉，不自动崩溃

1 个答案: