1

HTML ページに適用すると、Hoverintent が機能しません。ヘルプ！jsfddle では動作しますが、html ページでのテストは動作しません。

ここで動作します: http://jsfiddle.net/GZV5V/3/

.html ページでは動作しません (以下のコードはhttp://jsfiddle.net/GZV5V/3/と同じです)

<html>

    <head>
        <style type="text/css">
            #nav {
                padding: 40px;
                border: solid #999 1px;
            }
            #nav ul {
                margin: 0;
                padding: 0;
                display: none;
                background-color: #CCC;
            }
            #nav ul li {
                margin: 0;
                list-style: none;
                list-style-type: none;
                padding: 5px;
                width: 40px;
            }
            #nav a {
                color: black;
                text-decoration: none;
                padding: 5px;
            }
            #nav a:hover {
                text-decoration: none;
                background-color: yellow;
            }
            ​
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
        <script>
            var config = {
                over: function() { //onMouseOver callback (REQUIRED) 
                    $('ul', this).slideDown(250); //show its submenu

                },
                timeout: 500, // milliseconds delay before onMouseOut  (default 0)  
                out: function() { // function = onMouseOut callback (REQUIRED)
                    $('ul', this).slideUp(500); //hide its submenu        
                }
            };
            $('#nav li').hoverIntent(config);​
        </script>
    </head>

    <body>
        <ul id="nav">
            <li><a href="#">Main</a>

                <ul>
                    <li><a href="#">AAAAA</a>
                    </li>
                    <li><a href="#">BBBBB</a>
                    </li>
                    <li><a href="#">CCCCC</a>
                    </li>
                    <li><a href="#">DDDDD</a>
                    </li>
                    <li><a href="#">FFFFF</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>

</html>
4

1 に答える 1

2

DOM はまだロードされていません。コードを次のようにラップします$(document).ready。

$(document).ready(function () {
    var config = {    
        over: function () { //onMouseOver callback (REQUIRED) 
            $('ul', this).slideDown(250);//show its submenu
        },    
        timeout: 500, // milliseconds delay before onMouseOut  (default 0)  
        out: function () { // function = onMouseOut callback (REQUIRED)
            $('ul', this).slideUp(500); //hide its submenu        
        }     
    };
    $('#nav li').hoverIntent(config);​
});

コードを実行するように JSFiddle を構成しましたonLoad(「フレームワーク」の下の構成を参照してください)。それがフィドルで動作する理由です。

于 2012-11-27T00:18:34.663 に答える