如何在调整大小事件上触发我的 jQuery 脚本答案

【问题标题】：How do I trigger my jQuery script on resize event如何在调整大小事件上触发我的 jQuery 脚本
【发布时间】：2013-03-13 10:52:03
【问题描述】：

我有一个 jQuery 脚本，可以将我的菜单重新组织成一个选择表单元素，它工作正常。

我想在 .resize() 事件上触发它，但我无法让它工作。我该怎么做？

 $(function () {
    $(window).resize(function () {
        /* Get the window's width, and check whether it is narrower than 580 pixels */
        var windowWidth = $(window).width();
        if (windowWidth <= 580) {

            /* Clone our navigation */
            var mainNavigation = $('nav.main-navigation').clone();

            /* Replace unordered list with a "select" element to be populated with options, and create a variable to select our new empty option menu */
            $('nav.main-navigation').html('<select class="menu"></select>');
            var selectMenu = $('select.menu');

            /* Navigate our nav clone for information needed to populate options */
            $(mainNavigation).children('ul').children('li').each(function () {

                /* Get top-level link and text */
                var href = $(this).children('a').attr('href');
                var text = $(this).children('a').text();

                /* Append this option to our "select" */
                $(selectMenu).append('<option value="' + href + '">' + text + '</option>');

                /* Check for "children" and navigate for more options if they exist */
                if ($(this).children('ul').length > 0) {
                    $(this).children('ul').children('li').each(function () {

                        /* Get child-level link and text */
                        var href2 = $(this).children('a').attr('href');
                        var text2 = $(this).children('a').text();

                        /* Append this option to our "select" */
                        $(selectMenu).append('<option value="' + href2 + '">--- ' + text2 + '</option>');
                    });
                }
            });

        }

        /* When our select menu is changed, change the window location to match the value of the selected option. */
        $(selectMenu).change(function () {
            location = this.options[this.selectedIndex].value;
        });
    });
});

【问题讨论】：

首先，您首先发布相关代码...而且，您不会动态更改它...如果您缩小尺寸然后再次放大尺寸，则选择形式占主导地位（我认为它不应该发生）
要纠正我刚才提到的错误，您需要一个 else 语句来恢复主 if 条件内的操作......该代码只是说如果您的宽度低于 580px，它会更改为选择菜单和在您重新加载页面之前，它会一直保持这种状态。
事件处理程序绑定似乎没有任何问题，因此假设问题出在您所说的代码中正常工作。你能解释一下代码有什么问题吗（它做了什么，为什么不正确，它应该做什么）而不是仅仅说它不起作用？
谢谢henser，你说得对。但是如何将其从选择菜单恢复为列表菜单？
Anthony Grist：我的意思是，当我使用移动设备浏览网站时，代码工作正常，没有调整大小事件，但当我缩小窗口时它不起作用。我不得不更新页面以获取选择菜单。现在，当我拥有此代码时，选择菜单变为空白，正如 henser 所提到的，当我扩大窗口并且必须重新加载页面以获取列表菜单时，它会保持这种状态。原谅我的英语不好...

标签： jquery navigation responsive-design

【解决方案1】：

好吧，试试这个resize!

$("#div").resize(function(e){
   // do something when #div element resize
});

【讨论】：