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 回答