자바 스크립트 기반 미디어 쿼리

Question

화면 크기가 특정 너비 아래로 가면 동적으로 "추가 .."메뉴 항목을 만드는 반응 형 탐색 메뉴를 개발하려고합니다. Heres는 내 코드 지금까지

:

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> 

자바 스크립트 :

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() 함수를 한 번만 실행할 수 있습니까?

만 MoreMenu를 호출 할 수 있도록, 폭이 resize 이벤트 핸들러 이전 있었는지를 추적 자바 스크립트 :

Answer 1

주위에 내 머리를 얻을 수 -Struggling 미리 감사와 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; 
}); 

는 또한 previousWidth 처음부터 벤치 마크보다 작은 경우 처음 MoreMenu를 실행할 수 있습니다.