ASP.NET Core MVC中$(document).ready失效致菜单无法显示

我有一个作为网站布局的Razor视图，代码如下：

<link href="~/Contents/Material/css/memenu.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="~/Contents/Material/js/memenu.js"></script>
<script>
    $(document).ready(function () {
        $(".memenu").memenu();
    });
</script>
<script src="~/Contents/Material/js/simpleCart.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

memenu.js的路径为~/Contents/Material/js/memenu.js，路径看似正确，但$(document).ready函数似乎未生效，运行应用后网站菜单无法显示。

以下是memenu的定义代码：

$(document).ready(function () {
    $.fn.memenu = function (e) {
        function r() {
            $(".memenu").find("li, a").unbind();
            if (window.innerWidth <= 768) {
                o();
                s();
                if (n == 0) {
                    $(".memenu > li:not(.showhide)").hide(0)
                }
            } else {
                u();
                i()
            }
        }

        function i() {
            $(".memenu li").bind("mouseover", function () {
                $(this).children(".dropdown, .mepanel").stop().fadeIn(t.interval)
            }).bind("mouseleave", function () {
                $(this).children(".dropdown, .mepanel").stop().fadeOut(t.interval)
            })
        }

        function s() {
            $(".memenu > li > a").bind("click", function (e) {
                if ($(this).siblings(".dropdown, .mepanel").css("display") == "none") {
                    $(this).siblings(".dropdown, .mepanel").slideDown(t.interval);
                    $(this).siblings(".dropdown").find("ul").slideDown(t.interval);
                    n = 1
                } else {
                    $(this).siblings(".dropdown, .mepanel").slideUp(t.interval)
                }
            })
        }

        function o() {
            $(".memenu > li.showhide").show(0);
            $(".memenu > li.showhide").bind("click", function () {
                if ($(".memenu > li").is(":hidden")) {
                    $(".memenu > li").slideDown(300)
                } else {
                    $(".memenu > li:not(.showhide)").slideUp(300);
                    $(".memenu > li.showhide").show(0)
                }
            })
        }

        function u() {
            $(".memenu > li").show(0);
            $(".memenu > li.showhide").hide(0)
        }

        var t = { interval: 250 };
        var n = 0;
        $(".memenu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon1'></span><span class='icon2'></span></li>");
        r();
        $(window).resize(function () {
            r()
        })
    }
});

脚本路径截图：

可能的原因及解决方法 #

1. 缺失jQuery依赖
   所有使用$的代码都依赖jQuery，但当前代码里没有引入jQuery脚本。必须在memenu.js之前添加jQuery的引用，比如：

   <script src="~/Scripts/jquery.min.js"></script>
   

   确保jQuery脚本在所有依赖它的脚本之前加载。

2. memenu方法定义时机错误
   当前memenu.js把$.fn.memenu放在了自身的$(document).ready回调里，这会导致你调用$(".memenu").memenu()时，这个方法还未被定义（两个ready的执行顺序无法保证）。修改memenu.js，把方法定义移到ready外面：

   $.fn.memenu = function (e) {
       // 原函数内的所有逻辑保留
   };
   // 如果需要初始化代码，再单独写ready回调
   $(document).ready(function(){
       // 这里放需要页面加载后执行的初始化逻辑
   });
   

3. DOM元素加载顺序问题
   确保调用$(".memenu").memenu()时，页面上已经存在class为memenu的DOM元素。可以将你的脚本放在页面底部，或者确认DOM完全加载后再执行。

4. 脚本路径验证
   打开浏览器开发者工具的Network标签，检查memenu.js是否成功加载（没有404错误）。有时候Razor的~路径解析可能在布局页或部署环境中出现问题，需要确认实际请求的URL是否正确。

内容的提问来源于stack exchange，提问作者Nghĩa Nghĩa