javascript - 在 mouseenter/leave 上用 javascript 显示和隐藏 <ul>

Question

我在使用一个非常简单的 javascript 时遇到了问题。它应该在鼠标悬停或离开菜单时显示和隐藏我网站上的下拉菜单。

问题是我的脚本是由我的菜单的 ul 标签触发的，我的下拉菜单中有几个 UL。当我将鼠标悬停在菜单上时，它会正确显示，但是当我将鼠标向下移动到其中一个嵌套的 UL 时，由于脚本的原因，它会再次隐藏下拉菜单。

不知道如何解决这个问题:S

这是我的菜单:

<div class="menu" id="menu">
        <ul>
            <li><a href="#">Forside</a></li>
            <li><a href="#">Service</a>
                <ul>
                    <li class="menusektion1">
                        <h1>Vores arbejde</h1>
                        <ul>
                            <li><a href="">projekt</a></li>
                            <li><a href="">projekt2</a></li>
                            <li><a href="">projekt3</a></li>
                            <li><a href="">projekt4</a></li>
                        </ul>
                    </li>
                    <li class="menusektion2">
                        <h1>Menupunkt2</h1>
                        <ul>
                            <li><a href="">Title</a></li>
                            <li><a href="">Title2</a></li>
                            <li><a href="">Title3</a></li>
                            <li><a href="">Title4s</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Projekter</a></li>
            <li><a href="#">Referencer</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>    
    </div>

这是我的javascript:

    $(document).ready(function(){   
  $('#menu ul > li')
    .mouseenter(function(){
      $(this).find('ul').show();
    })
    .mouseleave(function(){
      $(this).find('ul').hide();
    }); 
});

有人可以帮我吗？

Answer 1

我知道您想将 ul 标签隐藏在悬停的 li 标签中。您的语法几乎是正确的。 我认为问题是，您要将事件监听器添加到菜单内的所有 li 标签。 试试这个:

$('#menu > ul > li').mouseenter(function(){});

这样第一层ul中的ul和li标签会受到很大影响。