基于Javascript的媒体查询

Question

我试图开发一个响应式导航菜单，当屏幕尺寸低于一定宽度时，它会动态创建一个“更多..”菜单项。

继承人到目前为止我的代码：

HTML：

<ul id="menuElem" class="clearfix"> 
    <li class="HighLighted"><a href="#">Menu Item 1</a></li> 
    <li><a href="#">Menu Item 2</a></li> 
    <li><a href="#">Menu Item 3</a></li> 
    <li><a href="#">Menu Item 4</a></li> 
    <li><a href="#">Menu Item 5</a></li> 
    <li><a href="#">Menu Item 6</a></li> 
</ul> 

的Javascript：

function MoreMenu() { 
    //Checks if sub-menu exsists 
    if ($(".sub-menu").length > 0) { 
     //if it does then prepends second-last menu item to sub menu 
     $(".sub-menu").prepend($("#menuElem > li:nth-last-child(2)")); 
    } 
    else { 
     //if it doesn't exsist then appends a list item with a menu-item "more" having a sub-menu and then prepends second-last menu item to this sub menu. 
     $("#menuElem").append("<li class='more'><a href='#'>More...</a><ul class='sub-menu'></ul></li>"); 
     $(".sub-menu").prepend($("#menuElem > li:nth-last-child(2)")); 
    } 
} 

function RemoveMoreMenu() { 
    //checks if sub-menu has something 
    if ($(".sub-menu li").length > 0) { 
     //if it does then the first child is taken out from the sub-menu and added back to the main menu. 
     $(".sub-menu li:first-child").insertBefore($("#menuElem > li:last-child")); 

     //if sub-menu doesn't have any more children then it removes the "more" menu item. 
     if ($(".sub-menu li").length === 0) { 
      $(".more").remove(); 
     } 
    } 
} 

function Resize() { 
    benchmark = 800; //Maximum width required to run the function 
    $(window).resize((function() { 
     currentWidth = $(window).width(); //Current browser width 
     if (benchmark - currentWidth > 0) { 
      //checks if the browser width is less than maximum width required and if true it trigers the MoreMenu function    
      MoreMenu(); 
      console.log("screen size resized down"); 
     } 
     else { 
     } 
    })); 
} 

问题是，当我运行Resize()功能它实际上是在每一个窗口大小调整MoreMenu()功能低于800px的活动 - 这并不理想。

那么，当屏幕尺寸低于800时，有没有办法只运行一次MoreMenu()函数？

提前感谢-Struggling我的头周围的javascript :)

Answer 1

跟踪什么样的宽度是以前的resize事件处理程序，所以你只叫MoreMenu和RemoveMoreMenu当你通宽度限制上涨或下跌。

var previousWidth = $(window).width(); 
var benchmark = 800; 

$(window).resize(function() { 
    var newWidth = $(window).width(); 
    if (newWidth < benchmark && previousWidth >= benchmark) { 
     MoreMenu(); 
    } 
    else if (newWidth >= benchmark && previousWidth < benchmark) { 
     RemoveMoreMenu(); 
    } 
    previousWidth = newWidth; 
}); 

你也可能需要运行MoreMenu最初如果previousWidth小于从开始的标杆。