Question

我正在尝试使用hoverIntent为suckerfish风格的下拉菜单添加延迟，但是我想清除触发另一个下拉菜单时的延迟，这样我就不会同时显示多个下拉菜单

我看过HoverIntent ClearTimeout，但似乎无法使用这种方法。所以，我尝试添加一个类来识别“活动”下拉列表。我认为当我尝试清除超时时，我可能无法正确定位正确的元素。

$(document).ready(function(){
    $('#nav li.parentItem').removeClass('parentItem');
    mainmenu();
});

function mainmenu(){
    var config = {
        interval: 100,    
        over: hoverMenu, // function = onMouseOver callback (REQUIRED)    
        timeout: 2000, // number = milliseconds delay before onMouseOut    
        out: mouseOutMenu // function = onMouseOut callback (REQUIRED)    
    };
    $("#nav li").hoverIntent(config);
}

function hoverMenu() {
    clearTimeout($('#nav li.activeMenuItem').hoverIntent_t);
    $(this).find('ul:first').css({left: "auto"}).stop().fadeTo(250, 1); 
    $(this).addClass('activeMenuItem')
}

function mouseOutMenu() {
    $(this).find('ul:first').stop().fadeTo(250, 0);
    $('.activeMenuItem').removeClass('activeMenuItem')
}

HTML

<ul id="nav">
    <li><a id="first-parent" href="#">Home</a></li>
    <li class="parentItem"><a href="#"><span class="top_level">About</span></a>
        <ul>
            <li class="first_item"><a href="#">Company Profile</a></li>
            <li class="parentItem"><a class="second-level-parent" href="#">Staff</a>
                <ul>
                    <li class="first_item"><a href="#">Employee 1</a></li>
                    <li><a href="#">Employee 2</a></li>
                    <li class="last_item"><a href="#">Employee 3</a></li>
                </ul>
            </li>
            <li><a href="#">Employment</a></li>
            <li><a href="#">Office Information</a></li>
            <li class="last_item"><a href="#">Directions</a></li>
        </ul>
    </li>
    <li class="parentItem"><a href="#"><span class="top_level">Services</span></a>
        <ul>
            <li class="first_item"><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
            <li><a href="#">Service 3</a></li>
            <li class="last_item"><a href="#">Service 4</a></li>
        </ul>
    </li>
    <li class="parentItem"><a href="#"><span class="top_level">Web/Email</span></a>
        <ul>
            <li class="first_item"><a href="#">Web</a></li>
            <li class="last_item"><a href="#">Email</a></li>
        </ul>
    </li>
    <li><a id="last-parent" href="#">Contact</a></li>
</ul>

非常感谢任何见解。

在下拉列表中使用clearTimeout和jQuery hoverIntent

0 个答案: