Question

我将发现如何为小屏幕制作菜单。我试图找到一个jQuery代码来做到这一点。这段代码运行得很完美，但我需要让它更复杂，并尝试响应当前的屏幕宽度。当我尝试使用menuScreen（）函数调用mobmenu（）时，我认为我丢失了当前的$（this）对象，因为代码停止运行。有人可以帮忙吗？

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

但请注意，您将通过在调整大小事件中调用此函数来复合许多点击处理程序。

调整大小事件可以在手动调整大小期间每秒多次触发...每次在其中调用插件时，您将在现有点击侦听器之上复合点击侦听器

JQuery当前的$（this）对象

1 个答案: