Question

这段代码完美无缺，但是当我打开浏览器时，我需要它才能运行。此外，当我调整浏览器大小以使移动菜单时，两个功能都可以悬停和切换。

$(window).on('resize', function(event) {
  var windowWidth = $(window).width();
  if (windowWidth < 1024) {
    $(document).ready(function() {
      $(".menu-item-has-children").hover(function() {
        $(".sub-menu").css("display", "block");
      }, function() {
        $(".sub-menu").css("display", "none");
      });
    });
  } else if (windowWidth > 1024) {
    jQuery(document).ready(function() {
      $('.menu-item-has-children').click(function() {
        $(this).find('.sub-menu').toggle();
      });
    });
  }
});

Answer 1

我最好的方法是用以下代码替换代码：

var reszFn = function(event) {
  var windowWidth = $(window).width();
  if (windowWidth < 1024) {
    $(document).ready(function() {
      $(".menu-item-has-children").hover(function() {
        $(".sub-menu").css("display", "block");
      }, function() {
        $(".sub-menu").css("display", "none");
      });
    });
  } else if (windowWidth > 1024) {
    jQuery(document).ready(function() {
      $('.menu-item-has-children').click(function() {
        $(this).find('.sub-menu').toggle();
      });
    });
  }
};
$(document).on('ready', reszFn);
$(window).on('resize', reszFn);

Answer 2

只需触发调整大小功能

$(window).on('resize', function(event) {
  var windowWidth = $(window).width();
  if (windowWidth < 1024) {
    $(document).ready(function() {
      $(".menu-item-has-children").hover(function() {
        $(".sub-menu").css("display", "block");
      }, function() {
        $(".sub-menu").css("display", "none");
      });
    });
  } else if (windowWidth > 1024) {
    jQuery(document).ready(function() {
      $('.menu-item-has-children').click(function() {
        $(this).find('.sub-menu').toggle();
      });
    });
  }
}).resize();

需要有关此jQuery代码的帮助

2 个答案: