需要更改下拉菜单的宽度,具体取决于嵌套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)Width编写工作代码应准确地应用于所需的类别,而不是全部。
我不知道该怎么办,请帮忙。
我认为您正在寻找这样的东西:
$('.mg-main-menu li .submenu').each(function () {
$(this).css({
width: (250 * Math.min($('li ul', this).length, 4)) + 'px'
});
});
(Math.max()
如果您不想限制宽度,请删除呼叫)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句