导航的jQuery调整大小功能无法正常工作

Question

我正在使用引导框架，但我的导航有问题。

基本上我的导航有两种不同的导航工作方式。 “桌面”方式和“移动”方式。

在“桌面”版本中，当用户单击导航链接时，子菜单将出现在整个屏幕上。这可以正常工作。

我想“移动”版本是您的标准移动导航，只有我的 jQuery 会查找任何父母，然后在它旁边添加一个 + 按钮。当用户单击“+”时，孩子们将向下切换并显示。这也正常工作。

如果用户出于某种原因从“桌面”切换到“移动”导航（我想检查响应性），我尝试调整窗口大小并让它们都工作时出现问题。

这是我的 jQuery：

$(".subnav").hide();

    $('.nav-collapse li').each(function(){
        var hasKids = $(this).find('ul').length > 0;
        if(hasKids){
            $(this).children('a')
            .append('<button>+</button>');                     
        }
    });

    function whatnav() {
        if ($(window).width() < 767) {
            $('.nav-collapse li').on('click', 'button', function(e){
                e.preventDefault();
                var plusOrMinus = $.trim($(this).text());

                if(plusOrMinus == '+'){
                    $(this).text('-');
                } else {
                    $(this).text('+');
                }

                $(this).parents('li').find('.subnav').toggle(250);
            });             
        } else {
            $("nav a").click(function () {
                $(this).parent('li').find(".subnav").css("display","table").fadeIn(250);
                event.stopPropagation();
            });
            $(".subnav").click(function() {
                $(this).fadeOut(250);
            });         

        }
    }

    $(document).ready(whatnav);
    $(window).resize(whatnav);

我创建了函数“whatnav”，然后做了一个 IF 语句 - 如果窗口低于 767px，则使用“移动”导航，否则使用“桌面”导航 jquery。

如果我从“移动”模式开始，然后移至桌面，则一切正常。但是，如果我再改回“移动”窗口宽度，它仍然使用“桌面”jQuery sn-p 而不是移动窗口。

我以前从未使用过 IF 语句 - 我做错了吗？任何帮助表示赞赏！

Answer 1

按如下方式存储窗口的初始大小：

    var initialSize = $( window ).width();
    $( "body" ).data( "viewportSize", initialSize );

然后您可以使用$( window ).width() 进行检查。不要忘记更新存储的值。

Answer 2

问题是每次调整窗口大小时，都会调用whatnav，它会一遍又一遍地绑定点击事件处理程序。

现在，如果您在移动设备大小的窗口中加载它，它会绑定移动设备事件处理程序。但是，如果您将大小调整为桌面大小，它仍然会将旧处理程序附加到元素上，并将桌面处理程序附加到顶部。如果您从台式机尺寸变为移动尺寸，同样的事情。

我提供的代码并不理想，有一种更简洁的方法来解决你的情况，但它足以说明在 jquery 中绑定和解除绑定事件是如何完成的:-)

$(document).ready(function(){
    // don't manipulate any element before document is ready!
    $(".subnav").hide();

    $('.nav-collapse li').each(function(){
        var hasKids = $(this).find('ul').length > 0;
        if(hasKids){
            $(this).children('a')
            .append('<button>+</button>');                     
        }
    });
});


function desktopLinkClick(ev) {
    // `ev` is the event object
    // `stopPropagation` prevents the click to be triggered on parent elements
    // you may want to use `preventDefault`, which cancels the click
    ev.stopPropagation();

    $(this).parent('li').find(".subnav").css("display","table").fadeIn(250);
}

function desktopSubnavClick() {
    $(this).fadeOut(250);
}

function mobileButtonClick(ev) {
    ev.preventDefault();
    var plusOrMinus = $.trim($(this).text());

    if(plusOrMinus == '+'){
        $(this).text('-');
    } else {
        $(this).text('+');
    }

    $(this).parents('li').find('.subnav').toggle(250);
}

function rebindClickEvents() {
    if ($(window).width() < 767) {
        // remove previous event handlers
        $("nav a").off('click', desktopLinkClick);
        $(".subnav").off('click', desktopSubnavClick);

        // bind new event handlers
        $('.nav-collapse li button').on('click', mobileButtonClick);
    } else {
        // remove previous event handlers
        $('.nav-collapse li button').off('click', mobileButtonClick);

        // bind new event handlers
        $("nav a").on('click', desktopLinkClick);
        $(".subnav").on('click', desktopSubnavClick);
    }
}

$(document).ready(rebindClickEvents);
$(window).resize(rebindClickEvents);