基于 Javascript 的媒体查询答案

【问题标题】：Javascript based media query基于 Javascript 的媒体查询
【发布时间】：2012-01-09 10:35:48
【问题描述】：

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

到目前为止，这是我的代码：

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() 函数时，它实际上为每个低于 800 像素的窗口调整大小活动运行 MoreMenu() 函数 - 这并不理想。

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

在此先感谢 - 努力让我了解 javascript :)

【问题讨论】：

标签： javascript jquery menu navigation

【解决方案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;
});

如果previousWidth 从一开始就小于基准，您可能还想在最初运行MoreMenu。

【讨论】：