仅在子菜单存在时显示图标

Question

在我的平板电脑导航中有一些“加号”图标来切换子菜单。我只想在子菜单存在时显示加号图标。

我已经用这个代码试过了：

        if($('.tablet-li-item').find('.tablet-sub-menu').length !== 0) {
        $(this).children('.open-btn').css('display', 'block');
    }

HTML：

<ul class="tablet-nav">
        {% for menuItem in menu.menuStructure %}
            <li class="tablet-li-item">
                {{ render( controller( "ez_content:viewLocation", {"locationId": menuItem.location.id, "viewType": "menu"} ) ) }}
                <i class="fa fa-caret-down open-btn" aria-hidden="true"></i>
                <div class="arrow"></div>
                {% if menuItem.submenu|length > 0 %}
                    <ul class="tablet-sub-menu" hidden>
                        <div class="inner-tablet-sub-menu">
                        {% for submenu in menuItem.submenu %}
                            <li class="tablet-sub-li-item">
                                {{ render( controller( "ez_content:viewLocation", {"locationId": submenu.location.id, "viewType": "menu"} ) ) }}
                            </li>
                        {% endfor %}
                        </div>
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>

此解决方案仅在我悬停/单击对象时才有效，不幸的是，此解决方案不适用于这种情况，因为它是平板电脑菜单。

也许有人可以帮我解决这个问题。

编辑：

现在我明白了，我用 jquery 函数 has() 和 addClass() 试了一下

$('.tablet-li-item').has('ul').children('.open-btn').addClass('active');

除了addClass()，show() 也是一种可能的解决方案。

Answer 1

我的猜测是你的错在$(this) 范围之外。

你可以试试这个：

$(document).ready(function(){
    $('.tablet-li-item').each(function(){
        if( $(this).find('.tablet-sub-menu').length > 0 ){
            $(this).children('.open-btn').css('visibility', 'visible');
        }
    });
});