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

Question

我有一个小脚本可以检测 window 宽度并在屏幕介于 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 + '%' );
    } 
}

});

Answer 1

您必须取消对您不想要的屏幕尺寸的限制

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

Answer 2

您似乎没有对 "else" 案例中的子项应用 width 样式。即当window宽度小于600px或大于1200px时。因此，那些在 window 位于 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' );
    }
});

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

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

javascript

responsiveness