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样式应用于＆＃34;其他＆＃34;中的子项目。案件。也就是说，当窗口宽度小于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' );
    }
});

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

2 个答案: