jQuery mouseover和mouseleave下拉菜单 [英] jQuery mouseover and mouseleave drop down menus

问题描述

以下内容显示一个菜单：

The following displays a menu:

<a href="#" id="cityclick">ONZE WAARDEN</a>

<div id="citydrop">
    <div class="dropbottom">
        <div class="dropmid">
            <ul>
                <li><a href="#">FAQ</a>
                </li>
                <li><a href="#">ITC</a>
                </li>
                <li><a href="#">CLUB</a>
                </li>
                <li><a href="#">CULTUUR</a>
                </li>
                <li><a href="#">ROBITICA</a>
                </li>
            </ul>
        </div>
    </div>
</div>

jQuery for如下：

The jQuery for is as follows :

$("#citydrop").hide();

$("#cityclick").mouseover(function () {
    $("#citydrop").slideDown('slow');
});

$("#citydrop").mouseleave(function () {
    $("#citydrop").slideUp('slow');
});

问题：
我无法弄清楚当鼠标离开cityclick但是没有进入citydrop时，如何切换子菜单citydrop。

PROBLEM: I'm not able to figure out how to toggle the submenu "citydrop" when the mouse leaves "cityclick" but does not enter "citydrop" yet.

我在这里尝试过 jsfiddle

推荐答案

在你的html上使用一些包装器，然后调用 mouseleave 事件，就像： http://jsfiddle.net/9yEHV/ 11 /

Use some wrapper on your html, and then call mouseleave event on it, like there: http://jsfiddle.net/9yEHV/11/

$("#wrapper").mouseleave(function () {
    $("#citydrop").slideUp('slow');
});

和包装：

<div id="wrapper">
    <a href="#" id="cityclick" >ONZE WAARDEN</a>
    <!-- rest of your code -->
</div>

这篇关于jQuery mouseover和mouseleave下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！