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');
        }
    });
});

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

1 个答案: