隐藏菜单元素不起作用

Hide menu element not working

本文关键字：不起作用 元素 隐藏菜单      更新时间：2023-09-26

我需要隐藏类元素media-caption并使其仅在将鼠标悬停在它上面时才可见，并且当将鼠标悬停在父菜单上时，子菜单的第一个元素也需要可见。

我试图使用 jquery 修复它，但到目前为止它没有以正确的方式工作。

请看一下小提琴 | 小提琴演示视图

我也无法理解为什么图像会自动更改而不是media-caption元素。

谢谢。

请随时进行更改，使其看起来更专业，因为我只是一个初学者。

可能不是最优化的示例，但它正在工作。

我为此使用 jquery，因此，我删除了 CSS 中子菜单的每个悬停语句。

然后我用jquery添加悬停/出出效果：

$(".dropdown ul li").each(function(){
    $(this).mouseenter(function(){
            $(this).parent().find( ".active" ).css( "display", "none" );
            $(this).find( ".dd-panel" ).css( "display", "block" );
     });
});
 $(".dropdown ul li").each(function(){
    $(this).mouseleave(function(){
            $(this).find( ".dd-panel" ).css( "display", "none" );
            $(this).parent().find( ".active" ).css( "display", "block" );
     });
});

我也添加一个标志，以识别如果未悬停必须显示的第一个元素：

$(".dropdown li:first-child .dd-panel",$(this)).css( "display", "block" );
$(".dropdown li:first-child .dd-panel",$(this)).addClass("active");

看到这个小提琴

询问您是否在使用时遇到一些麻烦。

不需要

jquery。首先删除 jquery..并且您的代码工作正常。

如果您不想显示第一个子项目图像，则只需删除以下代码

.dropdown li:first-child .dd-panel

从您的 CSS 文件

工作演示

试试这个

    $(document).ready(function () {
    $(".nav>li").on("mouseenter", function () {
        if($(this).find('.dd-panel').length>0)
        {
       $(this).find('.dropdown').addClass("has-panel");
        }
        $(this).find(".media-caption:first").css("display", "block");
    });
    $(".nav>li").find(".dropdown li:not(li:first)").on("mouseenter", function () {
        $(this).parents('.nav>li').find('.media-caption:first').css("display", "none");
    });

});

希望这有帮助，谢谢

相关文章：