響應式JavaScript下拉菜單問題

Question

基於Webdesigntuts +上的本教程 ，我實現了一個響應式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');
        });
    }
}

這是一些示例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-menu鏈接。 同樣，子導航將被隱藏，直到單擊父鏈接。

任何有jQuery / JavaScript經驗的人都可以提出任何潛在的解決方案嗎？

非常感謝！

Answer 1

作為一種一般規則（基於經驗），在document.ready上處理尺寸（寬度，高度等）的任何評估都是一種很奇怪的做法，因為很有可能甚至沒有放置頁面布局尚未解決，因此元素上的width和height值可能尚未評估。

您能否嘗試將adjustMenu()調用放到$(window).load()而不是$(document).ready() ？

同樣，將var ww = $(window).width()調用移到adjustMenu()函數本身中可能更好。

編輯

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
});