0

我使用另一个堆栈用户发布的脚本构建了一个下拉菜单，但是现在当我将鼠标悬停在它上面时，我无法保持它可见。这是网站：

http://79.24.150.216/

您可以尝试悬停“信息”，然后尝试悬停显示的菜单，您会发现它不会保持可见。

您可以在以下位置找到 css：

http://79.24.150.216/css/main.css

这是使用的 js 片段：

$('nav li').on('mouseenter mouseleave hover',function( e ){
$('#'+$(this).data('open'))[e.type=='mouseenter'?'slideDown':'slideUp'](); });

预先感谢您的宝贵帮助。

4

3 回答 3

1

您是否尝试添加#subnav用于悬停功能的元素$('nav li, #subnav')？

于 2012-11-23T22:43:23.237 回答
1

您的悬停仅适用于 LI 元素，因此一旦悬停离开该元素，您将失去悬停并且子导航正在关闭。

您可以尝试制作两个类 .default-class { display: none } .show { display: block }

然后尝试 $('nav li').on('hover click', function() { $('.subnav').addClass('show'); })

然后隐藏在 subnav (.removeClass('show'); 上执行鼠标离开事件；您还可以将鼠标悬停在任何其他 li 元素上，使 subnav 也隐藏。

于 2012-11-23T22:46:48.750 回答
0

试试这个解决方案。

$(document).ready(function(){
    $('nav li').on('mouseenter click hover',function( e ){
        var value = $(this).attr('data-open');
        $('#'+value).slideDown();     
    });

    $('#subnav ul li').on('mouseleave', function(e){
        var menu = $(this).parent().parent().parent().attr('id');
        $('#'+menu).slideUp();
    });
});

希望能帮助到你。

建议：您可以使用 info-submenu 定义子菜单，以便您可以动态获取正确的 div 以加载顶部菜单。

于 2012-11-23T23:38:24.357 回答