Question

我有一个使用嵌套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，我在.navtab li中添加了一个.hover（），其中.show（）是.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();
}

Answer 1

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

这对我有用。

Answer 2

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

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

Answer 3

我最后不得不使用jQuery插件hoverIntent，为了鼠标输出而忽略了孩子。

jQuery .hover（）让我发疯

3 个答案: