Jquery 子菜单在偶数大小调整中不可见（响应）

我正在用jQuery创建一个子菜单

我已经让它在超过700像素宽的屏幕上工作，但当视口变小并再次将其调整为更大时，子菜单会出现并中断（但仍在700像素以下的宽度上工作）

因此，基本上，脚本似乎不知道如何在访问较低分辨率后将响应子菜单恢复正常。我做错了什么

通过以下行解决：el2.off（）

jQuery

jQuery（函数（$）{
$（文档）.ready（函数（）{
/*
*@name:setDimensions
*@作者：*******
*@versio:0.1
*@description:Vigila el-tamaño de la pantalla
*@日期：2016/04/04
*
*@param:none
*@return:none
*/
延迟=250，
节流=假，
调用=0；
函数setDimensions（）{
响应菜单（）；
};
//window.resize事件侦听器
addEventListener（'resize'，function（））{
//只有在没有节流的情况下才可以跑
如果（！节流）{
//实际回调操作
设置维度（）；
//我们被勒死了！
节流=真；
//将超时设置为取消油门
setTimeout（函数（）{
节流=假；
}，延误）；
}  
});
设置维度（）；
/*
*@name:responsiveMenu
*@作者：*****
*@versio:0.1
*@说明：
*@日期：2016/04/04
*
*@param:none
*@return:none
*/
函数响应菜单（）{
var el=$（“菜单原则”）；
变量el2=$（“.levelFather”）；
if（window.matchMedia（（（最大宽度：700px）”）.matches）{
如果（！el.hasClass（“响应菜单”））{
el.addClass（“响应菜单”）。在（“”）之前；
$（“.responsive菜单图标”）。单击（函数（）{
$（“#菜单"主体”）。切换类（“openMenu”）；
});
}
if（！el2.hasClass（“响应子菜单”））{
el2.addClass（“响应子菜单”）；
el2.单击（函数（）{
$（此）.toggleClass（“打开”）；
});
}
}否则{
if（el.hasClass（“响应菜单”））{
el.removeClass（“响应菜单”）；
if（el.hasClass（“openMenu”）{el.removeClass（“openMenu”）；}
el.prev（）.remove（）；
}
if（el2.hasClass（“响应子菜单”））{
el2.off（）；您应该提供一个包含HTML代码的提琴…；）这是一个难题，为什么你不尝试使用老式的@media Queries CSS来做这件事，而不是使用JavaScript/jQuery？？？这里有一个来自W3Schools的链接：Hello Umair。因为在一个动画中，我需要点击打开，而不是悬停。在桌面中，是用悬停打开的。我认为这真的会帮助你更好地了解情况……你可以采取行动看看：
jQuery(function( $ ){

$(document).ready(function(){

    /*
    * @name: setDimensions
    * @author: *******
    * @versio: 0.1
    * @description: Vigila el tamaño de la pantalla
    * @date: 2016/04/04
    *
    * @param: none
    * @return: none
    */

    delay = 250,
    throttled = false,
    calls = 0;

    function setDimensions(){
        responsiveMenu();
    };


    // window.resize event listener
    window.addEventListener('resize', function() {
        // only run if we're not throttled
      if (!throttled) {
        // actual callback action
        setDimensions();
        // we're throttled!
        throttled = true;
        // set a timeout to un-throttle
        setTimeout(function() {
          throttled = false;
        }, delay);
      }  
    });

    setDimensions();

    /*
    * @name: responsiveMenu
    * @author: *****
    * @versio: 0.1
    * @description: 
    * @date: 2016/04/04
    *
    * @param: none
    * @return: none
    */
    function responsiveMenu(){

        var el = $("#menu_principal");
        var el2 = $(".levelFather");

        if (window.matchMedia("(max-width: 700px)").matches) {
            if(!el.hasClass("responsive-menu")){
                el.addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

                $(".responsive-menu-icon").click(function(){
                    $("#menu_principal").toggleClass("openMenu");
                });
            }
            if(!el2.hasClass("responsive-submenu")){
                el2.addClass("responsive-submenu");

                el2.click(function(){
                    $(this).toggleClass("open");
                });

            }

        }else{

            if(el.hasClass("responsive-menu")){
                el.removeClass("responsive-menu");
                if(el.hasClass("openMenu")){el.removeClass("openMenu");}
                el.prev().remove();
            }

            if(el2.hasClass("responsive-submenu")){
                el2.off(); <----
                el2.removeClass("responsive-submenu");
                if(el2.hasClass("open")){el2.removeClass("open");}
            }



            $("#menu_principal").removeAttr("style");
        }

    }


}); //End $(document).ready

}); //End jQuery function