JQuery current $ (this) object

Question

Im собираюсь узнать, как сделать меню доступным для небольшого экрана. Я пытался найти код jQuery для этого. Этот код работал отлично, но мне нужно сделать его более сложным и попытаться ответить на текущую ширину экрана. Когда я пытался вызвать mobmenu() с помощью функции menuScreen(), я думаю, что потерял текущий $ (этот) объект, потому что код остановился. Может кто-нибудь быть полезным.

(function($) {                  
    $.fn.mobmenu = function(options) { 
     console.log("m1 - The current version of jQuery being used: jquery " + jQuery.fn.jquery); 
    return this.each(function(){          
       console.log("m1.1 - Waiting for click..."); 
       //---------- and nothing going on here :-(
       $(this).find("ul.nav > li > .not_active").on("click", function(){ 

         console.log("m2 - Menu element cliked"); 
         if ($(this).siblings(".nav-child").css("display") == "block") { 
          $(this).siblings(".nav-child").toggle(); 
         } else { 
          console.log("m3 else loop"); 
          $(this).parents(".nav").find(".nav-child").css("display", "none"); 
          $(this).siblings(".nav-child").toggle(); 
          console.log("m4 else loop end"); 
          }; 
          $(this).siblings(".nav-child").find(".not_active").on("click", function() { 
            if ($(this).siblings(".nav-child").css("display") == "block") { 
             $(this).parents("li").find("li .nav-child").toggle(); 
            }; 
            if ($(this).siblings(".nav-child").css("display") == "none") { 
             console.log("m5 - menu 2nd level display before: ", $(this).siblings(".nav-child").css("display")); 
             $(this).siblings(".nav-child").toggle(); 
             console.log("m6 - menu 2nd level display after: ", $(this).siblings(".nav-child").css("display")); 
            };          
          }); 
       }); 
     });                     
    }; 
})(jQuery); 

(function($) {                   
    $(document).ready(function() { 
      function menuScreen() { 
       console.log("3 - Called menuScreen"); 
        console.log("4 - screen.width = ", screen.width,"px"); 
        $(this).mobmenu(); 
        console.log("5 - Called mobmenu"); 

      }; 
      //----------------------------------------------- 
      console.log("1 - Main code START after page ready"); 
      if ($(window).width() < 400) { 
       console.log("2 - Czy < 400px: -> ", screen.width, "px", $(window).width()," px"); 
       menuScreen(); 
      } else { 
       console.log("6 - Screen larger than: 400 -> ", screen.width); 
      }; 
      //----------------------------------------------- 
      $(window).on('resize', function() { 
       console.log("7 - Screen resize detected"); 
       if ($(window).width() < 400) { 
        console.log("7 - After resize screen", screen.width); 
        menuScreen();     
        console.log("8 - menuScreen called"); 
       } else { 
       console.log("9 - Screen after resize operation still larger than: 400 -> ", screen.width); 
       };     
      }); 
    }); 
})(jQuery);        

Answer 1

Используйте фактический селектор для вызова своего плагина.

, как вы используете это сейчас, this не является элементом

Изменение

$(this).mobmenu(); 

Для

$('#mobMenuId').mobmenu(); 

Пожалуйста, обратите внимание, однако, что вы собираетесь быть компаундирования много много нажмите обработчиков, вызвав это внутри события изменения размера.

Resize событие может быть вызвано много раз в секунду во время ручного изменения размера ... и каждый раз, когда вы звоните плагин внутри вы будете компаундирования клик слушателей поверх существующих клик слушателей