Bootstrap Shopify导航不会崩溃

Question

我目前正在使用Bootstrap制作自定义Shopify菜单，并且遇到一些相当奇怪的问题。我似乎无法折叠菜单中的内容。

代码如下：

<ul class="navbar-nav">
    {%for link in linklists[settings.main_linklist].links %}
        {%if link.links == blank%}
            <li class="nav-item active">
                <a class="nav-link" href="{{link.url}}">{{link.title}}</a>
            </li>
        {%endif%}
        {%if link.links != blank%}
            <li class="nav-item dropdown dropdown-mobile">
                <a class="nav-link scroll-link dropdown-toggle dropdown-toggle-mobile" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Shop
                </a>
                <div class="dropdown-menu dropdown-menu-mobile full-width" aria-labelledby="navbarDropdown">
                    {%for childlink in link.links%}
                        <div class="row text-center w-100">
                            <div class="col-12">
                                <a class="nav-link dropdown-toggle dropdown-toggle-mobile" id="navbarDropdown" role="button" data-toggle="dropdown{{childlink.title}}" aria-haspopup="true" aria-expanded="false">{{childlink.title}}</a>
                                <div class="dropdown-menu dropdown-menu-mobile full-width">
                                    {% for sublink in childlink.links %}
                                        <p class="text-center">{{sublink.title}}</p>
                                    {%endfor%}
                                </div>
                            </div>
                        </div>
                    {%endfor%}
                </div>
            </li>
        {%endif%}
    {%endfor%}
</ul>

换句话说，我无法使用以下方法折叠{% for sublink in childlink.links %}内容的父项：

<a class="nav-link dropdown-toggle dropdown-toggle-mobile" id="navbarDropdown" role="button" data-toggle="dropdown{{childlink.title}}" aria-haspopup="true" aria-expanded="false">{{childlink.title}}</a>

图片示例：

Answer 1

向要折叠的孩子添加dropdown-item类。 代替

<p class="text-center">{{sublink.title}}</p>

使用

<p class="dropdown-item text-center">{{sublink.title}}</p>