我正在尝试开发一个响应式导航菜单,当屏幕尺寸低于特定宽度时,该菜单会动态创建“更多..”菜单项。
这是我到目前为止的代码:
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()
函数时,它实际上为每个低于 800px 的窗口调整大小事件运行 MoreMenu()
函数 - 这并不理想。
那么,当屏幕尺寸低于 800 时,有没有办法只运行一次 MoreMenu()
函数?
提前致谢 - 努力了解 javascript :)
最佳答案
跟踪 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;
});
如果 previousWidth
从一开始就小于基准,您可能还想首先运行 MoreMenu
。
关于基于 Javascript 的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8787070/