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(){}

此外，您可以通过简单地将文档准备好时调用的函数直接传递给jQuery来简化document.ready代码：

$(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 f1menu(){ //logic }

文档就绪功能 - 不首先加载代码

2 个答案: