多文件问题

Question

我在项目中遇到了一个独特的问题，这个问题发生在共享布局中。我已经导入了几个脚本和样式表。

    <!-- Script: -->
    <script src="../../content/scripts/jquery.min.js"></script>
    <script src="~/Content/Scripts/Navigation.js" type="text/javascript"></script>

    <!-- Stylesheet: -->
    <link href="~/Content/Stylesheet/Skin.css" rel="stylesheet" />
    <link href="~/Content/Stylesheet/Navigation.css" rel="stylesheet" />

因此，我在Navigation.css中有相关的导航数据来处理特定的布局，然后在Navigation.js中通过添加特定的元素来处理对根布局的特定修改：

$(function () {
     if(screen.width < 768 || screen.width < 1024) {
         $("nav").addClass(".Desktop-Navigation");
     }
});

但是，当代码位于一个单独的文件中时，它似乎忽略了它。即使我包含根，它也不会，但是代码在http://jsfiddle.net/中正确工作。

我不确定问题或原因。

我忘了提一提，我确实尝试过以下几点：

• 我试过做$(document).ready
• 将脚本移动到页面上的最后一个项目。

addClass上面的代码总是执行，但addClass部分实际上从未执行。这是上面总是执行的代码：

$(function () {
     $("#Toggle-Menu").click( function () {
          $("nav").animate({ height: 'toggle' }, 500);
     });
});

这是模型视图控制器如何呈现视图的问题吗?为什么会发生这种情况？

Answer 1

听起来您的JavaScript在完全呈现之前正在执行。这一点由于您的jsfiddle可能被配置为在文档就绪时执行而得到加强。因此，尝试包装您的函数也是一个已经准备好的文档。

$(document).ready(function () {
    if(screen.width < 768 || screen.width < 1024) {
        $("nav").addClass(".Desktop-Navigation");
    }
});