jQuery下拉悬停菜单 [英] jQuery Drop Down Hover Menu

问题描述

我是jQuery的新手，我希望你们能帮助我。我正在尝试制作一个悬停下拉菜单，但它非常错误。你能帮我清理一下我的Javascript吗？请查看我的代码。

I'm new to jQuery, I was hoping you guys could help me. I'm trying to make a hover dropdown menu, but it's extremely buggy. Can you help me clean up my Javascript? Look at my code please.

http://jsdo.it/mretchin/4Ewk

无论出于何种原因，它都无法在jsdo.it上运行，但它适用于Komodo Edit。

It doesn't work on jsdo.it for whatever reason, but it works in Komodo Edit.

如果你真的想自己试试代码，问题主要是Javascript。你可以帮助我做到这一点，当用户将鼠标悬停在img.menu_class上时，ul.file_menu下降，然后，如果我想，我可以将鼠标悬停在ul中的#something上，它会在水平上而不是垂直地退出。

Try out the code yourself if you really want to, the problem is mainly the Javascript. Can you help me make it so that when the user hovers over img.menu_class, ul.file_menu drops down, and then, if I wanted, I could hover over #something in ul and it would drop out horizantally, not vertically.

感谢您的帮助！我很感激！

Thanks for helping! I appreciate it!

我应该放弃并让它在CSS中运行吗？

Should I just give up and make it work in CSS?

推荐答案

您可以执行此之类的操作：

You can do something like this:

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').stop(true, true).slideDown('medium');
        },
        function() {
            $('ul.file_menu').stop(true, true).slideUp('medium');
        }
    });
});

和这里一个带子菜单的例子：

And here an example with sub-menus:

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').slideDown('medium');
        },
        function() {
            $('ul.file_menu').slideUp('medium');
        }
    );

    $(".file_menu li").hover(
        function() {
            $(this).children("ul").slideDown('medium');
        },
        function() {
            $(this).children("ul").slideUp('medium');
        }
    );
});

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