Jquery Hoverintent延迟无法在html页面中工作_Jquery_Jquery Ui_Jquery Plugins_Hoverintent

Jquery Hoverintent延迟无法在html页面中工作

jquery jquery-ui jquery-plugins

Jquery Hoverintent延迟无法在html页面中工作,jquery,jquery-ui,jquery-plugins,hoverintent,Jquery,Jquery Ui,Jquery Plugins,Hoverintent,当我应用到html页面时，Hoverintent不起作用。救命啊！在JSFDLE上它可以工作，但在html页面上测试它不起作用在这里工作：无法在.html页面上工作（下面的代码与相同） #导航{ 填充：40px；边框：实心#999 1px； } #导航ul{ 保证金：0；填充：0；显示：无；背景色：#CCC； } #李国荣{ 保证金：0；列表样式：无；列表样式类型：无；填充物：5px；宽度：40px； } #导航a{ 颜色：黑色；文字装饰：无；填充物：5px； }

当我应用到html页面时，Hoverintent不起作用。救命啊！在JSFDLE上它可以工作，但在html页面上测试它不起作用

在这里工作：

无法在.html页面上工作（下面的代码与相同）


#导航{
填充：40px；
边框：实心#999 1px；
}
#导航ul{
保证金：0；
填充：0；
显示：无；
背景色：#CCC；
}
#李国荣{
保证金：0；
列表样式：无；
列表样式类型：无；
填充物：5px；
宽度：40px；
}
#导航a{
颜色：黑色；
文字装饰：无；
填充物：5px；
}
#导航a：悬停{
文字装饰：无；
背景颜色：黄色；
}

变量配置={
over:function（）{//onMouseOver回调（必需）
$（'ul'，this）.slideDown（250）；//显示其子菜单
},
超时：onMouseOut之前延迟500，//毫秒（默认值为0）
out:function（）{//function=onMouseOut回调（必需）
$（'ul'，this）.slideUp（500）；//隐藏其子菜单
}
};
$（#nav li'）.hoverIntent（配置）；

DOM尚未加载。将您的代码包装成：

您已经将JSFIDLE配置为运行代码

onLoad

（请参阅“框架”下的配置）。这就是为什么它可以在小提琴上演奏。

@Phillip:没问题！很高兴我能帮忙。

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

$(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);
});