在窗口调整大小时调用移动菜单功能

时间:2018-02-21 11:16:04

标签: javascript jquery

我在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();
});

1 个答案:

答案 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();
});