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()
    })
}