Question

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

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'](); });

提前感谢您的宝贵帮助。

Answer 1

您是否尝试将#subnav添加到用于悬停函数$('nav li, #subnav')的元素中？

Answer 2

你的悬停只对LI元素有效，所以一旦你从那里悬停，你就会丢失悬停并且subnav正在关闭。

你可以尝试制作两个课程 .default-class {display：none} .show {display：block}

然后试试 $（'nav li'）。on（'hover click'，function（）{$（'。subnav'）。addClass（'show'）;}）

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

Answer 3

试试这个解决方案。

$(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来加载顶级菜单。

如何在悬停时保持此下拉菜单可见？

3 个答案: