响应JavaScript下拉菜单问题

基于，我正在实现一个响应JavaScript菜单，它支持子菜单/下拉菜单

不幸的是，在设备的方向改变或浏览器宽度改变之前，子菜单/下拉系统无法工作

下面是JavaScript/jQuery代码：

var ww = $(window).width();

$(document).ready(function() {

adjustMenu();

$(".nav li a").each(function() {
    if ($(this).next().length > 0) {
        $(this).addClass("parent");
    };
})

$(".toggle-menu").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
    $(".nav").toggle();
});

});

$(window).bind('resize orientationchange', function() {
    ww = $(window).width();
    adjustMenu();
});

var adjustMenu = function() {
    if (ww <= 480) {
        $(".toggle-menu").css("display", "inline-block");
        if (!$(".toggle-menu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww > 480) {
        $(".toggle-menu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

var ww=$（窗口）.width（）；
$（文档）.ready（函数（）{
调整菜单（）；
$（“.nav li a”）。每个（函数（）{
if（$（this）.next（）.length>0）{
$（此）.addClass（“父级”）；
};
})
$（“.toggle menu”）。单击（函数（e）{
e、 预防默认值（）；
$（此）.toggleClass（“活动”）；
$（“.nav”）.toggle（）；
});
});
$（窗口）.bind（'resize orientationchange'，function（）{
ww=$（window.width（）；
调整菜单（）；
});
var adjustMenu=功能（）{
如果（ww 480）{
$（“.toggle menu”）.css（“显示”、“无”）；
$（“.nav”）.show（）；
$（“.nav li”）.removeClass（“悬停”）；
$（“.nav li a”）.unbind（'click'）；
$（“.nav li”）.unbind（'mouseenter mouseleave'）.bind（'mouseenter mouseleave'，function（）{
//必须连接到li，以便鼠标悬停在子菜单上时不会触发mouseleave
$（this.toggleClass（'hover'）；
});
}
}

以下是一些示例HTML：

 <a class="toggle-menu" href="#"><img src="/images/responsive/menu.png" alt="Menu"></a>
    <ul class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About Us</a></li>
        <li><a href="/url/">Menu item</a>
            <ul>
                <li><a href="/url/">Menu item intro</a></li>
                <li><a href="/url/sub1/">Submenu item 1</a></li>
                <li><a href="/url/sub2/">Submenu item 2</a></li>
                <li><a href="/url/sub3/">Submenu item 3</a></li>
            </ul>
        </li>
    </ul>

在单击.toggle菜单链接之前，导航菜单一开始是隐藏的。此外，在单击父链接之前，子导航是隐藏的

有更多jQuery/JavaScript经验的人能提出一些可能的解决方案吗

非常感谢

作为一种一般规则（并基于经验），在

文档上处理任何尺寸（宽度、高度等）的评估都是不可靠的。准备好了吗

，因为你的页面布局很可能还没有布置好，因此，元素上的

宽度

和

高度

的值可能尚未计算

您是否可以尝试将

adjustMenu（）

调用放到，比如说，

$（窗口）.load（）

而不是

$（文档）.ready（）

另外，最好将

var ww=$（window）.width（）调用移入
adjustMenu（）
函数本身

编辑
谢谢你提供的信息，理查德。非常感谢。我试过你的建议，但我想我一定是把代码放错地方了。您是否介意告诉我完整的$（window）.load（）调用应该是什么样子，以及如何按照您的建议将var ww=$（window）.width（）调用移动到adjustMenu（）函数本身中？非常感谢。@benspencer~更新。您只需像使用
$（document）.ready（）
处理程序（或任何jQuery事件处理程序）一样使用它。Richard，您是一个明星。现在很好用，谢谢！非常感谢你的帮助，没问题。很高兴能帮上忙。：）你的参考链接有一个错误，它不能正常工作
var adjustMenu = function () {
        var ww = $window.width();
        // the rest of your adjustMenu function
    },
    $window = $(window).bind('resize orientationchange load', adjustMenu)
    ;

$(document).ready(function () {
    // your original document ready handler
    // EXCEPT for the adjustMenu() call
});