多个窗口事件侦听器具有奇怪的效果

Question

我似乎无法使用事件调整大小事件侦听器来触发具有正文背景的代码为红色的第二个。我的代码如下所示当您从小尺寸开始查看网站时link-here并调整大小直到背景变为红色。单击“服务”按钮不执行任何操作，但是如果您从大尺寸调整为红色，则会自动打开导航并且切换单击工作。不知道为什么。

var resizeMethod = function(){
    if (document.body.clientWidth > 1400) {

      $("body").css("background", "purple");



      $(".first , .drop-down li").mouseenter(function() {
        $(".drop-down").addClass("drop-down-visible");
        $(".first a").css("background", "#8F8F8F");
      }).mouseleave(function(){
        $(".drop-down").removeClass("drop-down-visible");
        $(".first a").css("background", "#CDCDCD");
      });


      $(".icon-1 , .info-1").hover(function() {
        $(".info-1").addClass("info-visible");
      }, function() {
      $(".info-1").removeClass("info-visible");

      });

      $(".icon-2 , .info-2").hover(function() {
        $(".info-2").addClass("info-visible");
      }, function() {
      $(".info-2").removeClass("info-visible");

      });

      $(".icon-3 , .info-3").hover(function() {
        $(".info-3").addClass("info-visible");
      }, function() {
      $(".info-3").removeClass("info-visible");

      });

      $(".icon-4 , .info-4").hover(function() {
        $(".info-4").addClass("info-visible");
      }, function() {
      $(".info-4").removeClass("info-visible");

      });

    }
  }

  window.addEventListener("resize", resizeMethod, true);

  var resizeMethodM = function(){

    if(document.body.clientWidth < 1400) {


    $("body").css("background", "red");

      $(".first").click(function(e){
          e.preventDefault();
          $(".mainNav .drop-down").toggleClass("drop-down-visible-m");

    });

    }
  }

  window.addEventListener("resize", resizeMethodM, true);