javascript - 如何使用 jquery 或 javascript 在悬停时显示这个 ul li 下拉菜单？

Question

我有以下 CSS:

<ul id="nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle">Dropdown Appear 1</a>
    <ul class="dropdown-menu">
        <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
        </ul>
    </li>
    <li><a href="#contact">Somelink</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle">Dropdown Appear 2</a>
    <ul class="dropdown-menu">
        <li><a href="#">Another Item 1</a></li>
            <li><a href="#">Another Item 2</a></li>
        </ul>
    </li>
</ul>

目前在 CSS 中，下拉菜单有一个“显示:无”属性集。我想这样做，以便无需为我的任何 DOM 元素分配 ID，用户可以将鼠标悬停在上方或单击“Dropdown Appear 1”或“Dropdown Appear 2”并显示其各自的下拉菜单。我该如何做到这一点？ (如果有向下滑动过渡会很好。)

Answer 1

最简单的方法是将 hover 应用于 li，这样当用户将鼠标悬停在子菜单上时，他们不会触发 mouseout 事件离开 a 元素:

$('li.dropdown').hover(
    function(){
        $(this).find('ul').slideDown();
    },
    function(){
        $(this).find('ul').slideUp();
    });

JS Fiddle demo .

引用资料:

• > hover() .
• > find() .
• > slideDown() .
• > slideUp() .