Javascript 如何确保我的子菜单在悬停或添加延迟后不会消失

我有一个没有Javascript的CSS3导航菜单，我喜欢它现在的样子，但有一个问题，用户正在为此烦恼

问题是，当用户将鼠标悬停在菜单链接上时，子菜单会弹出，这正是我想要的，但如果用户将鼠标箭头移离子菜单或菜单链接，则其显示速度会非常快。这很烦人，我不知道如何解决这个问题，有两种解决方案，一种是始终显示子菜单，另一种解决方案是，当用户从子菜单中悬停时，子菜单应至少等待5-10秒，然后消失，如果您悬停并回悬停，子菜单应保持不变。但是我不知道怎么做

下面是代码和示例，请尝试一下，任何解决方案都将不胜感激

在JSFIDLE中展开结果窗口以查看整个nav菜单

---

提前谢谢

有多种解决方案可以解决您的问题：

使用css转换来延迟子菜单的消失（您在聊天中提到您无法访问样式表…可能尝试使用内联样式？这不是最好的主意，但也许您可以接受）：

如果您有jQuery，则可以使用

.animate（）

来执行此操作 同样的事情：

也请看一下

.stop（）

：

如果所有其他操作都失败，您可以尝试使用

setTimeout（）

---

这只是一个例子-

我建议你自己做实验，直到得到想要的结果

此示例基于

mouseenter

/

mouseleave

事件：

$("#nav li").mouseenter(function(){
   $(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
   $(this).children('#sub').hide("slide", { direction: "up" }, 300);
});

---

它还使用JQuery UI

Hop，下面是您修改的JSFIDLE：

---

现在，正如你所看到的，这还远远不够完美。您不应该更改style属性，而应该先添加然后删除一个类，但您已经知道了如何执行此操作。

请在页面中添加此脚本，这是一种简单的方法 第一步-

在页面中添加comon jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

第一步- 在页面中添加此脚本-

<script type="text/javascript">
jQuery(document).ready(function() {
            $('ul#nav li').hover(function()
                          {
                          $(this).find('ul').stop(true,true).slideDown()
                          },
                          function()
                          {
                          $(this).find('ul').stop(true,true).slideUp()
            });
});

</script>

jQuery（文档）.ready（函数（）{
$（'ul#nav li'）。悬停（函数（）
{
$（this）.find（'ul'）.stop（true，true）.slideDown（）
},
函数（）
{
$（this）.find（'ul'）.stop（true，true）.slideUp（）
});
});

我对你的css有一些小的改变

演示

你的代码（li:hover）在ie6中不起作用，你检查过了吗？

检查一下
这个速度适合你吗……

示例：

使用jQuery

$(document).ready(function(){
    var clearli;
    $(".test").hover(function() {
        clearTimeout(clearli);
        $("ul#nav li").removeClass('current');
        $(this).addClass('current');
    }, function() {
        var getthis = $(this);
        clearli = setTimeout(function() {
           $(getthis).removeClass('current');
        }, 500);
    });
});

更改CSS

ul#nav li:hover>ul{

to

ul#nav li.current>ul{

ul#nav li:hover>ul li a{

to

ul#nav li.current>ul li a{

编辑：由于错误，我将选择器更改为

.test

，并将类测试添加到

---

EDIT2：我觉得很愚蠢，我忘了停止超时计数器。上面编辑过。

CSSS转换将是只使用CSS进行此操作的唯一方法。只需设置转换延迟，在延迟时钟完成之前，CSS更改不会生效。唯一的问题是IE，它不支持CSS转换

---

除此之外，您还需要使用基于JavaScript的菜单，这些菜单的实现可以在互联网上找到。

我一直在使用这三个菜单，但我无法让它工作。两次使用同一id不是无效的吗？如果您愿意，可以使用同一个类。这里我将其用作标识。我不知道如何使用它这样做是的，但是当您将鼠标悬停在菜单链接上时，如果您在子菜单消失时将鼠标悬停在外，子菜单将打开，如果您在子菜单消失时将鼠标悬停在内，子菜单将被窃听。如果您在子菜单上同时将鼠标悬停在外，子菜单将不会停留，子菜单将消失：/您可以将超时时间从500毫秒更改为您想要的任何时间。谢谢，这正是我想要的！）