我在JS中有一个函数,我正在调用窗口调整大小。在移动平板电脑用例中,将方向从横向更改为纵向,反之亦然,会更改窗口尺寸。不仅如此,它还有助于在桌面浏览器中进行测试。
因此该函数不应该仅应用于文档加载,而是调整窗口大小。目前,窗口调整大小重新加载不起作用,我不知道为什么。任何建议都会有所帮助。
您可以在此处看到示例:
// Mobile Menu Function
function mobMenu() {
var $window = $(window);
var $html = $('html');
var $dropdown = $('.dropdown-nav > a');
var $allDropdown = $('.dropdown-nav');
var $hamburger = $('.hamburger > a');
var $hamburgerInPage = $('.hamburger-in-page > a');
var $menu = $('.cpi-main-nav');
var $menuInPage = $('.in-page-nav nav');
var $isiOS = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null;
if ($isiOS) {
$(document).on('click touchend', function () {
$dropdown.parent().removeClass('active-hit');
});
$dropdown.on('click', function(e){
e.preventDefault();
e.stopPropagation();
});
$html.addClass('mobile-view');
} else {
$html.removeClass('mobile-view');
}
if ($window.width() < 900) {
$hamburger.on('click', function(e){
$menu.toggleClass('open-close-nav');
});
$hamburgerInPage.on('click', function(e){
$menuInPage.toggleClass('open-close-in-page-nav');
});
// On Click Drop Down
$dropdown.on('click', function(e){
// Close Everything but the current Drop Down
$allDropdown.not($(this).parent()).removeClass('active-hit');
//if current is open then close
if ($(this).parent().hasClass('active-hit')) {
$(this).parent().removeClass('active-hit');
}
//if current is closed then open
if (!$(this).parent().hasClass('active-hit')) {
$(this).parent().addClass('active-hit');
}
e.preventDefault();
e.stopPropagation();
});
$html.addClass('mobile-view');
} else {
$html.removeClass('mobile-view');
$menu.removeClass('open-close-nav');
$dropdown.parent().removeClass('active-hit');
}
}
$(window).resize(function () {
mobMenu();
});
$(document).ready(function() {
mobMenu();
});
答案 0 :(得分:1)
正如@CBroe所说,你正在堆积事件处理程序,你在mobMenu
函数中拥有所有代码,并且每次调整窗口大小时都会执行该代码。因此,当你第一次调整大小时,第二次没有调整大小,第三次奇迹般再次起作用:O。
这是您目前的情况:
// This function is called when page loads/window resizes
function mobMenu() {
// Show hide Dropdown Menu button depending on window size when page loads/window resizes
if ($window.width() < 900){
$html.addClass('mobile-view');
}
// Register a new click event-handler when window loads/resize [MISTAKE!!!]
$hamburger.on('click', function (e) {
$menu.toggleClass('open-close-nav');
});
}
$(window).resize(function () {
mobMenu();
});
$(document).ready(function () {
mobMenu();
});
这就是你处理它的方式:
// This function is called when page loads only
function setupMobMenu() {
// Declare variables
$html = $('.selector');
// Put all window adjusting code in a function
function adjustMyPageToWindow(){
// Show/Hide Dropdown Menu button depending on window size
if ($window.width() < 900){
$html.addClass('mobile-view');
}
}
// Register a new click event-handler when window loads only
$hamburger.on('click', function (e) {
$menu.toggleClass('open-close-nav');
});
// Register all other event-handlers here
//.....
// Register window resize event-handler
$(window).resize(adjustMyPageToWindow);
// Adjust page now (On page load)
adjustMyPageToWindow();
}
$(document).ready(function () {
setupMobMenu();
});
工作代码:
function setupMobMenu() {
var $window = $(window);
var $html = $('html');
var $dropdown = $('.dropdown-nav > a');
var $allDropdown = $('.dropdown-nav');
var $hamburger = $('.hamburger > a');
var $hamburgerInPage = $('.hamburger-in-page > a');
var $menu = $('.cpi-main-nav');
var $menuInPage = $('.in-page-nav nav');
var $isiOS = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null;
if ($isiOS) {
$(document).on('click touchend', function () {
$dropdown.parent().removeClass('active-hit');
});
$dropdown.on('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
$html.addClass('mobile-view');
} else {
$html.removeClass('mobile-view');
}
function adjustMyPageToWindow(){
$(window).resize(function () {
if ($window.width() < 900) {
$html.addClass('mobile-view');
} else {
$html.removeClass('mobile-view');
$menu.removeClass('open-close-nav');
$dropdown.parent().removeClass('active-hit');
}
});
}
$hamburger.on('click', function (e) {
$menu.toggleClass('open-close-nav');
});
$hamburgerInPage.on('click', function (e) {
$menuInPage.toggleClass('open-close-in-page-nav');
});
// On Click Drop Down
$dropdown.on('click', function (e) {
// Close Everything but the current Drop Down
$allDropdown.not($(this).parent()).removeClass('active-hit');
//if current is open then close
if ($(this).parent().hasClass('active-hit')) {
$(this).parent().removeClass('active-hit');
}
//if current is closed then open
if (!$(this).parent().hasClass('active-hit')) {
$(this).parent().addClass('active-hit');
}
e.preventDefault();
e.stopPropagation();
});
// Register window resize event-handler
$(window).resize(adjustMyPageToWindow);
// Adjust page now (On page load)
adjustMyPageToWindow();
}
$(document).ready(function () {
setupMobMenu();
});