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

Question

我正在使用 Bootstrap 框架，但我的导航出现问题。

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

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

我想“移动”版本是您的标准移动导航，只有我的 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 片段而不是移动片段。

我以前从未使用过 IF 语句 - 我做错了吗？如有任何帮助，我们将不胜感激!

Answer 1

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

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

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