JQuery - 防止多级下拉菜单在悬停时消失

Question

我有一个包含 2 个级别的下拉菜单。将链接悬停在 1 级时，它成功打开了 2 级，但是，当我的鼠标从 1 级移动到 2 级时，整个菜单消失了。 （悬停时出现下拉菜单）

基本上我想要实现的是在二级下拉菜单的悬停上，以使整个下拉菜单不会消失并允许用户单击 LEVEL 2 链接。

这是我的 HTML 供参考：

<ul class="link">
  <li class="level-one-link">
    <a href="" class="link-name">
        LEVEL 1 LINK
        <ul class="level-two-dropdown">
            <li class="level-two-link">
                <a href="" class="link-name">
                    LEVEL 2 LINK
                </a>
            </li>
        </ul>
    </a>
  </li>
</ul>

我的 JQuery：

function displayDropDown(){
$(".link-name").on("mouseenter", function (){
    $(this).addClass("highlighted")
})

$(".link-name").on("mouseleave", function (){
    $(this).removeClass("highlighted")
})

$(".level-two-dropdown").on("mouseenter", function (){
    $(this).parent("a").addClass("highlighted")
})

$(".level-two-dropdown").on("mouseleave", function (){
    $(this).parent("a").removeClass("highlighted")
})

}

CSS：

.highlighted {display: block);

Answer 1

CSS

.level-two-dropdown {
  display: none;
}

JS

function displayDropDown(){
$(".link-name").on("mouseenter", function (){
    $('.level-two-dropdown').css("display", "block")
})
$(".link-name").on("mouseleave", function (){
    $('.level-two-dropdown').css("display", "none")
})
}

结果：

这也可以，而且更干净：

function displayDropDown(){
    $(".link-name").hover(function() {
    $('.level-two-dropdown').toggle()
    })
}