文档准备功能 - 不先加载代码

Question

我有一个在正文上工作的函数 onload="" 但我需要它在页面的其他元素之前加载，我试图在页眉中添加文档就绪函数，但它只是没有'好像不行。

f1menu() {
    $('.menuH').hover(
        function() {
            $('.menuC').stop().animate({width: '90px'},333)
        }, 
        function() {
            $('.menuC').stop().animate({width: '-0'}, 333)
        }
    );
}

$(document).ready(function() {
    f1menu();
});

所以 onload 起作用的函数就是下面这个：

onload="$('.menuH').hover(function() {$('.menuC').stop().animate({width: '90px'}, 333)}, function() {$('.menuC').stop().animate({width: '-0'}, 333)});"

Answer 1

请注意，以下答案是在 OP 更改问题之前提供的。

你应该写：

  function f1menu(){}

不是，

  f1menu(){}

此外，您可以简化 document.ready 代码，只需将文档准备就绪时要调用的函数直接传递给 jQuery:

$(function() {
     $('.menuH').hover(
         function() {
            $('.menuC').stop().animate({width: '90px'}, 333);
         }, 
         function() {
            $('.menuC').stop().animate({width: '-0'}, 333);
         }
     );
});

更新：

在 OP 修改问题后，解决方案（顺便说一下，不是推荐的方法）是将脚本插入页面正文，但在函数引用的任何元素之后，例如：

 <body>

     <!-- elements that the code references must come before the code -->
     <script>
        // .menuH and .menuC elements must have already been loaded into DOM
        $('.menuH').hover(
           function() {
               $('.menuC').stop().animate({width: '90px'},333)
           }, 
           function() {
               $('.menuC').stop().animate({width: '-0'}, 333)
           }
        );
     </script>

     <!-- Rest of HTML -->
 </body>

Answer 2

它不知道 f1menu 是一个函数，因为您没有将它声明为一个函数。试试这个：

function f1 menu(){ //逻辑<br> }

文档准备功能 - 不先加载代码

Document ready function - Not loading the code first

javascript

jquery

onload

domready