0

我在使用非常简单的 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();
    }); 
});

有人可以帮我吗？

4

2 回答 2

3

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

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

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

于 2012-08-06T08:09:40.693 回答
0

'Find' 用于遍历目标的子元素，所以基本上你是在 li 内部寻找任何 ul（因此它不会找到它的父 ul）。parent()如果这适合您的树，请尝试使用closest('ul')

于 2012-08-06T08:02:20.527 回答