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

Question

我有一个小脚本，可以检测窗口宽度并在屏幕介于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

看来您没有将width样式应用于“其他”案例中的子项目。也就是说，当窗口宽度小于600px或大于时1200px。600px因此，当窗口在您的-宽度限制范围内时，那些调整大小的项目1200px将保持这种状态，直到页面被刷新。

如果您想出一个默认案例，您可以width像在您的if身体中一样设置样式。

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