0

基于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经验的人可以提出任何潜在的解决方案吗？

非常感谢！

4

1 回答 1

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
});
于 2013-06-14T10:47:14.753 回答