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

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

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

这样第一级ul内的ul和li标签就会受到影响。

Answer 2

'查找'适用于遍历目标的子元素，所以基本上你正在查看任何ul的内部（因此它不会找到它的父元素）。如果这适用于您的树或parent()

，请尝试使用closest('ul')

使用javascript on mouseenter / leave </ul>显示和隐藏<ul>

2 个答案: