媒体查询能html的ID吗,基于Javascript的媒体查询

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

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

HTML：

• Menu Item 1
• Menu Item 2
• Menu Item 3
• Menu Item 4
• Menu Item 5
• Menu Item 6

的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("

More...");

$(".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 :)

2012-01-09

Varinder