代码之家 › 专栏 › 技术社区 › b. e. hollenbeck

jquery.hover()把我逼疯了

javascript-events jquery javascript

0

b. e. hollenbeck · 技术社区 · 17 年前

我有一个项目使用嵌套的ul下拉菜单,如下所示:

<ul id="nav">
    <li id="thome" class="navtab">
    <a href="#" class="navlink lhome" id="nav_home" onclick="doCurrent('home');">HOME</a>
        <ul id="subnav_home" class="submenu">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">SMS</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Twitter</a></li>
        </ul>
    </li>
</ul>

使用jquery,我将.hover()添加到.navtab li that.show()s the.submenu ul中。问题是,当光标移动到新的ul时,.navtab的.hover()-out会在子菜单中触发.hide(),尽管事实上我有li的高度,所以它会完全包围.submenu ul。

我已经尝试向.hide()添加延迟,但是如果您将光标快速地传递到navtab栏上,您将同时获得所有子菜单。

有什么解决办法吗?这是相关的javascript。hide()函数与.show()相同,只是它缩小了高度并隐藏了ul(显然)。

$('.navtab').hover(
        function(){
            tabShowSubnav($(this).attr('id'));
        },
        function(){
            tabHideSubnav($(this).attr('id'));
    });

function tabShowSubnav(menu){

    var sb = '#' + menu + ' > .submenu';
    var tb = '#' + menu;
    $('.navtab').each(function(){
        if (!$(this).hasClass('current_page')){
            $(tb).addClass('nav_hover');
        }
    });
    $(tb).css('height','239px');    
    $(sb).show();
}

3 回复 | 直到 17 年前

1

0

halocursed 17 年前

    $('.navtab').hover(
        function() {
                    $(this).children(".submenu").show().children('current_page').addClass("nav_hover");
        },
        function() {
        });

    $(".submenu").mouseout(function(){
        $(this).hide();
    });

2

0

Your Friend Ken 17 年前

    $('.navtab').hover(
    function() {
        $(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
    },
    function() {
        $(this).children(".submenu").hide();
    });

这对我有用。

3

0

b. e. hollenbeck 17 年前

我最后不得不使用jquery插件hoverintent,它为了mouseout的目的而忽略了孩子们。