列表项的宽度未调整超过最大像素声明

Width of list item isn't adjusting past maximum pixel declaration

本文关键字：像素 声明 调整 列表      更新时间：2023-09-26

我有一个小脚本，如果屏幕在 600px 和 1200px 之间，它可以检测窗口宽度并调整子导航列表项。 该脚本在约束范围内工作，但是当浏览器调整大小超过 1200px 或低于 600px 时，宽度声明将始终应用于每个相关列表项。 但是，一旦刷新页面，宽度就是它应该的样子。 第一次在这里发海报，所以请让我知道我错过了什么。

谢谢

$(window).resize(function() {
var sub_menu_list_item = $('.current-menu-item .sub-menu li');
var sub_menu_list_item_count = sub_menu_list_item.length;
var divisor = ( 1 / sub_menu_list_item_count );
var width = divisor * 100;
var ww = $(window).width();
if ( ww > 600 && ww < 1200 ){
    if ( sub_menu_list_item_count % sub_menu_list_item_count === 0 ){
        sub_menu_list_item.css('width',  width + '%' );
    } 
}

}）;

您

似乎没有将width样式应用于"else"情况下的子项。也就是说，当窗口宽度小于600px或大于1200px .因此，当窗口位于600px内时调整大小的那些项目1200px宽度约束将保持这种状态，直到刷新页面。

如果您提出默认情况，则可以像在if正文中一样设置width样式。

$(window).resize(function() {
    var sub_menu_list_item = $('.current-menu-item .sub-menu li');
    var sub_menu_list_item_count = sub_menu_list_item.length;
    var divisor = ( 1 / sub_menu_list_item_count );
    var width = divisor * 100;
    var ww = $(window).width();
    if ( ww > 600 && ww < 1200 ){
        if ( sub_menu_list_item_count % sub_menu_list_item_count === 0 ){
            sub_menu_list_item.css('width',  width + '%' );
        } 
    } else {
        sub_menu_list_item.css('width',  'auto' );
    }
});
您必须

删除不想要的屏幕尺寸的限制

if ( ww > 600 && ww < 1200 ){
    if ( sub_menu_list_item_count % sub_menu_list_item_count === 0 ){
        sub_menu_list_item.css('width',  width + '%' );
    } 
    else {
        sub_menu_list_item.css('width',  'auto' );
   }
}
相关文章：