Question

我有一个简单的水平菜单，有四个选项。当我鼠标悬停一个div（例如div A）时，它的孩子会出现当我指出那个特定的div时，它的孩子会消失。

我已经为mouseover放置了一个setTimeOut函数（大约是300）。

在某些特定条件下，我想禁用setTimeout

1。当我 mouseout div A 和 i mouseover div B 时，我会不喜欢拥有那个延迟，而且我想展示B的childDiv

2。当我 mouseout div B 而我 mouseover div C 时，我会不喜欢拥有那个延迟，而且我想展示C的childDiv

但我怎样才能实现呢？

只是我有一系列事件：（一个简单的算法）

If(mouseout(divA) && mouseover(divB))
   {
   disable setTimeOut;
   show(ChildDivB);  //with no delay
   }
else If(mouseout(divB) && mouseover(divC))
   {
   disable setTimeOut;
   show(ChildDivC);  //with no delay
   }

   }

通常，当我 mouseover＆amp;＆amp; mouseout 在“foo”div中，（foo是包含所有div的div）settimeout将被禁用。

可以在jquery中完成吗？

我的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
    .myDiv {
        border:1px solid red;
        height:30px;
        width:100px;
        float:left;
        }
    .myDivChild {
        display:none;
        width:300px;
        height:300px;

    }   
</style>

</head>

<body>
<div class="foo" style="background-color:#3300FF;width:900px;height:30px;margin-top:100px;">
    <div class="myDiv" style="background-color:red;margin-left:100px">A
        <div class="myDivChild" style="background-color:red">
            Child Div A
        </div>
    </div>
    <div class="myDiv" style="background-color:yellow">B
        <div class="myDivChild" style="background-color:yellow">
            Child Div B
        </div>
    </div>
    <div class="myDiv" style="background-color:green">C
        <div class="myDivChild" style="background-color:green">
            Child Div C
        </div>
    </div>
    <div class="myDiv" style="background-color:#00CCCC">D
        <div class="myDivChild" style="background-color:#00CCCC">
            Child Div D
        </div>
    </div>
</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        var interval;


    $('.foo > div').hover(function(){
                                    var $showDiv =     $(this).find('div');         
                                    interval = setTimeout(function(){
                                                                    $showDiv.show();
                                                                    },300);
                                    },
                        function(){
                                clearTimeout(interval);
                                $(this).find('div').hide();
                                });


</script>

</body>
</html>

Answer 1

分配一个变量然后清除它：

var myInterval=setTimeout(...);

要禁用：

clearTimeout(myInterval);

请注意，分配给setTimeout的变量具有清除超时的范围。此外，每个变量只保留一个间隔。如果覆盖它，它将不会清除先前的超时。（除非它是一个具有多个键/属性的数组或对象，在这种情况下你无法清除整个数组/对象，你需要遍历它们并一次清除每个数组/对象。）

Answer 2

你不能做像

这样的事情

If(mouseout(divA) && mouseover(divB))

因为这些是事件，而不是变量。您需要做的是记录应用程序的状态，然后对此状态做出反应。例如，在mouseOut的事件处理函数中，设置变量

lastMouseOut = this;

然后，在mouseOver的事件处理函数中，您可以进行比较：

if ((lastMouseOut==divA) && (this==divB)) {...}

确保lastMouseOut是一个全局变量，而不是处理函数中的本地变量。

Answer 3

这就是我作为一个例子所做的事情：

<强> CSS

#menu li {
    cursor: pointer;
}

#menu ul {
    display: none;
}

<强> HTML

<ul id="menu">
    <li id="one" class="mainMenu">Menu 1
        <ul>
            <li>Submenu 1</li>
            <li>Submenu 2</li>
            <li>Submenu 3</li>
        </ul>
    </li>
    <li id="one"class="mainMenu">Menu 2
        <ul>
            <li>Submenu 1</li>
            <li>Submenu 2</li>
            <li>Submenu 3</li>
        </ul>
    </li>
    <li id="three"class="mainMenu">Menu 3
        <ul>
            <li>Submenu 1</li>
            <li>Submenu 2</li>
            <li>Submenu 3</li>
        </ul>
    </li>
</ul>

<强>的Javascript

$(function(){
    $('.mainMenu').hover(
        function(){doMenu(this)},
        function(){undoMenu(this)}
    );
});

function doMenu(el){
    switch (el.id) {
        case 'one':
        case 'two':
            $('ul', el).show();
        break;
        default:
            var menuTimeout = setTimeout(function(){$('ul', el).show()}, 300);
            $.data($('#menu'), 'menuTimeout', menuTimeout);
    }
}

function undoMenu() {
    $('#menu ul').hide();
    cancelTimeout($.data($('#menu'), 'menuTimeout'));
}

http://jsfiddle.net/XJhLD/

Answer 4

首先，您确定要在所有下拉菜单吗？由于无鼠标设备如今非常普遍，如iPad，您至少需要一个后备解决方案。话虽这么说，大约一年前我可以说I also struggled with this issue（见主菜单）。

如果你不需要，不要像我一样重新发明轮子。您是否尝试过搜索小型JS插件/库？您可能希望使用jQuery hoverIntent plugin作为延迟内容。

当我鼠标移动时，如何禁用/取消setTimeOut＆amp;＆amp; mouseout在特定区域？

4 个答案: