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

Question

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

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