Question

需要更改下拉菜单的宽度，具体取决于嵌套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）编写工作代码宽度应该精确地应用于所需的类别，而不是全部。

我无法理解怎么做，请帮忙。

Answer 1

我认为你正在寻找类似的东西：

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

（如果您不想限制宽度，请移除Math.max()来电。）

需要更改下拉菜单的宽度，具体取决于嵌套ul的数量

1 个答案: