javascript - 隐藏菜单元素不起作用

Question

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

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

请看Fiddle | 小提琴演示视图

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

谢谢。

由于我只是初学者，请随时进行更改以使其看起来更专业。

Answer 1

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

我为此使用 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");

看到这个小提琴

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

Answer 2

不需要jquery。首先删除 jquery .. 你的代码工作正常。

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

.dropdown li:first-child .dd-panel

从你的 CSS 文件

Answer 3

工作演示

试试这个

    $(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");
    });


});

希望这会有所帮助，谢谢