带有slideToggle的hoverintent.js

Question

我有一个带有以下标记的导航菜单：

<ul class="main-nav">
    <li><a href="url/page">Parent</a>
        <ul class="main-nav-child">
            <li><a href="url/page">Child</a></li>
            <li><a href="url/page">Child</a></li>
            <li><a href="url/page">Child</a></li>
        </ul>
     </li>
</ul>

我正在使用slideToggle来隐藏/展示孩子UL：ul.main-nav-child，如下所示：

$(function () {
    $('ul.main-nav-child').hide();
    $('.main-nav > li').hover(function () {
        $('ul', this).slideToggle(300);
    });
});

我正在尝试使用hoverintent.js插件，在查看给定here的示例后，我仍处于死胡同状态。

这是我到目前为止所尝试的内容：

$('.main-nav > li').hover(function(){
        $('ul', this).doTimeout( 'slideToggle', 250 );
    }, function(){
        $('ul', this).doTimeout( 'slideToggle', 250 );
});

感谢任何帮助或指示。

Answer 1

试试这个：

<强> DEMO

$(function () {
    $('ul.main-nav-child').hide();
    $('.main-nav > li').hover(function(){
        $(this).doTimeout( 'hover', 250, function() {
            $('.main-nav-child').slideToggle(250);
        });
    });
});