Question

我设计了自定义导航栏/菜单。它目前从我的style.css调用CSS，并且使用的JS使用以下设置包含在PHP文件中

 <link rel="stylesheet" href="style.css" type="text/css">
 <nav> ... </nav>
 <script>
$(function () {
        $('.toggle-menu').click(function (){
        $('.exo-menu').toggleClass('display');

        });
    });
    jQuery(document).ready( function ( $ ){
        $(".change>a").hover( function () { 
            $(this)[0].click();
        }, 
        function () {
        /* code for mouseout */
    });
    });
</script>

内部JS似乎导致了CSS加载的问题。

有没有什么方法可以在JS之前加载被调用的CSS，同时保持原样，而不将Javascript放在单独的.js表上？

到目前为止已经尝试过：

<head>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">
    <nav> ... </nav>
    <script>
        function initNavigation() {
            $(function () {
                $('.toggle-menu').click(function (){
                $('.exo-menu').toggleClass('display');
                });
            });
            jQuery(document).ready( function ( $ ){
                $(".change>a").hover( function () { 
                $(this)[0].click();
                }, 
                function () {
                /* code for mouseout */
                });
            });
        }
    </script>
</body/>

和

<head>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <nav> ... </nav>
    <script>
        window.onload=function(){
            $(function () {
                $('.toggle-menu').click(function (){
                $('.exo-menu').toggleClass('display');
                });
            });
            jQuery(document).ready( function ( $ ){
                $(".change>a").hover( function () { 
                $(this)[0].click();
                }, 
                function () {
                /* code for mouseout */
                });
            });
        }
    </script>
</body/>

谁能告诉我哪里出错了？我正在考虑它的.ready部分，但如果是的话，不确定如何摆脱它而不影响JS的工作原理？

如果我将JS移到头部并将其放在CSS下面，可能会有所作为吗？

Answer 1

只需在body标签中使用onload事件，并将js包装在函数中。

<head>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">

  <nav></nav>

  <script>
    function initNavigation() {
      // your script goes here
    }
  </script>
</body>

Answer 2

在你的剧本中写：

window.onload=function(){
   //Your JS script
}

这样，您的代码将在页面完全加载后执行

在Javascript之前加载CSS

2 个答案: