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

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

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

在“桌面”版本上，当用户单击导航链接时，子菜单将显示在整个屏幕上。这是正确的工作，因为它应该

“mobile”版本是您的标准移动导航，我想，只有我的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);

$（.subnav”）.hide（）；
$（'.nav collapse li'）。每个（函数（）{
var hasKids=$（this）.find（'ul'）.length>0；
如果（有孩子）{
$（this.children（'a'））
.append（“+”）；
}
});
函数whatnav（）{
如果（$（窗口）.width（）<767）{
$（'nav collapse li'）。在（'click'，'button'，函数（e）上{
e、 预防默认值（）；
var plusor减号=$.trim（$（this.text（））；
如果（加减=='+'）{
$（此）.text（'-'）；
}否则{
$（this.text（+）；
}
$（this）.parents（'li'）.find（'subnav'）.toggle（250）；
});             
}否则{
$（“导航a”）。单击（函数（）{
$（this）.parent（'li'）.find（'subnav'）.css（“display”，“table”）.fadeIn（250）；
event.stopPropagation（）；
});
$（“.subnav”）。单击（函数（）{
美元（本）。淡出（250）；
});         
}
}
美元（文件）.ready（whatnav）；
$（窗口）。调整大小（whatnav）；

我创建了函数“whatnav”，然后做了一个IF语句-如果窗口低于767px，那么使用“mobile”导航，否则使用“desktop”导航jquery

如果我在“移动”模式下启动，然后移动到桌面，一切正常。但是，如果我随后更改回“移动”窗口宽度，它仍然使用“桌面”jQuery片段，而不是移动窗口

---

我以前从未使用过IF语句-我做错了吗？感谢您的帮助

存储窗口的初始大小，如下所示：

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

---

然后可以使用

$（window.width（）

执行检查。不要忘记更新存储值。

问题是，每次调整窗口大小时，都会调用

whatnav

，它会一次又一次地绑定单击事件处理程序

现在，如果在移动大小的窗口中加载它，它将绑定移动事件处理程序。但是，如果调整到桌面大小，它仍然将旧的处理程序附加到元素，并将桌面处理程序附加到顶部。同样的事情，如果你从桌面大小到手机大小

我提供的代码并不理想，有一种更简洁的方法可以解决您的问题，但它足以说明在jquery中绑定和解除绑定事件是如何完成的：-）

$（文档）.ready（函数（）{
//在文档准备就绪之前，不要操作任何元素！
$（“.subnav”）.hide（）；
$（'.nav collapse li'）。每个（函数（）{
var hasKids=$（this）.find（'ul'）.length>0；
如果（有孩子）{
$（this.children（'a'））
.append（“+”）；
}
});
});
功能桌面链接点击（ev）{
//`ev`是事件对象
//'stopPropagation'防止在父元素上触发单击
//您可能希望使用“preventDefault”，这将取消单击
ev.stopPropagation（）；
$（this）.parent（'li'）.find（'subnav'）.css（“display”，“table”）.fadeIn（250）；
}
函数desktopSubnavClick（）{
美元（本）。淡出（250）；
}
功能mobileButtonClick（ev）{
ev.preventDefault（）；
var plusor减号=$.trim（$（this.text（））；
如果（加减=='+'）{
$（此）.text（'-'）；
}否则{
$（this.text（+）；
}
$（this）.parents（'li'）.find（'subnav'）.toggle（250）；
}
函数rebindClickEvents（）{
如果（$（窗口）.width（）<767）{
//删除以前的事件处理程序
美元（“导航a”）。关闭（“单击”，桌面链接单击）；
$（“.subnav”）.off（'click'，desktopSubnavClick）；
//绑定新事件处理程序
$（'nav collapse li button'）。在（'click'，mobileButtonClick）上；
}否则{
//删除以前的事件处理程序
$（'.nav collapse li button'）.off（'click'，mobileButtonClick）；
//绑定新事件处理程序
美元（“资产净值”）。在（'click'，desktopLinkClick）上；
美元（“.subnav”）。在（'click'，desktopSubnavClick）；
}
}
$（文档）.ready（重新绑定ClickEvents）；
$（窗口）。调整大小（重新绑定ClickEvents）；

你好，加布里埃尔，谢谢你的回复！我还在学习jQuery，所以请原谅我对这个（！）的无知，但它会是这样的：我问：if（initialSize<767）{}else{}这是正确的方法吗？如何更新存储的值？很多人都尝试过很多变化，并阅读了jquery网站上的数据属性，但我仍然不确定如何更新存储值——我可以在任何地方看到一些例子吗？