我正在使用jQuery创建一个子菜单。
我已经开始研究超过700像素宽的屏幕尺寸,但是当视口低于此值并再次将其调整得更大时,子菜单会断开(但仍然可以在700像素以下的宽度上工作)。
所以基本上看起来脚本不知道如何在访问较低分辨率后将响应子菜单恢复正常。我在这里做错了什么?
解决了以下行:el2.off();
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
小提琴