javascript - jQuery 下拉悬停菜单

Question

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

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

无论出于何种原因，它在 jsdo.it 上不起作用，但在 Komodo Edit 中起作用。

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

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

我应该放弃并让它在 CSS 中工作吗？

Answer 1

您可以执行类似 this 的操作:

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

和here带有子菜单的示例:

$(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');
        }
    );
});