需要根据嵌套ul的数量更改下拉菜单的宽度

Need to change the width of the drop-down menu, depending on the number of nested ul

本文关键字：下拉菜单 嵌套 ul      更新时间：2023-09-26

需要根据嵌套ul的数量更改下拉菜单的宽度。 

if( $('.mg-main-menu li .submenu li ul').size() == 1 )
{
    $('.mg-main-menu li .submenu').css({"width" : "250px"}); 
};

if( $('.mg-main-menu li .submenu li ul').size() == 2 )
{
    $('.mg-main-menu li .submenu').css({"width" : "500px"}); 
};

if( $('.mg-main-menu li .submenu li ul').size() == 3 )
{
    $('.mg-main-menu li .submenu').css({"width" : "750px"}); 
};

if( $('.mg-main-menu li .submenu li ul').size() == 4 )
{
    $('.mg-main-menu li .submenu').css({"width" : 1000px"}); 
};

结构

<ul class="mg-main-menu">
    <li><a href="#"></a>
        <ul class="submenu">
            <li><a href="#"></a>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
            </li>
        </ul>
    </li>   
    <li><a href="#"></a>    
        <ul class="submenu">
            <li><a href="#"></a>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
            </li>
        </ul>
    </li>   
    <li><a href="#"></a>
        <ul class="submenu">
            <li><a href="#"></a>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#"></a>
        <ul class="submenu">
            <li><a href="#"></a>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
                <ul>
                    <li><a href="#"></a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

代码无法正常工作:)

如何使用属性 $（this） 编写工作代码宽度应精确地应用于所需的类别，而不是全部。

我不明白该怎么做，请帮忙。

我想你正在寻找这样的东西：

$('.mg-main-menu li .submenu').each(function () {
    $(this).css({
        width: (250 * Math.min($('li ul', this).length, 4)) + 'px'
    });
});

（如果不想限制宽度，请删除Math.max()调用）。

相关文章：