Question

基于this tutorial over at 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
});

响应式JavaScript下拉菜单问题

1 个答案:

修改