javascript - 悬停元素时显示/隐藏级联菜单

Question

当用户将鼠标移动到某个元素上时，我需要显示/隐藏级联菜单。这很容易用 jquery 实现，使用悬停功能:
N.B: timer只是用来在200ms后隐藏菜单，并不重要。

$(document).ready(function() {
    var timer;
    $('.element,.cascading_menu').hover(function(){
        clearTimeout(timer);
        $('.cascading_menu').show();
    }, function(){
        timer = setTimeout(function(){$('.cascading_menu').hide();},200);
    });
});

我必须为每个要隐藏的菜单重复此代码。
但由于我有很多菜单，我想减少代码长度。

我的想法是使用一组“元素悬停的 id:id 菜单来显示/隐藏”。
您是否认为可以编写一个 jQuery 函数，在给定此元素数组的情况下，提供显示每个菜单的功能，而无需多次编写该代码？

Answer 1

您可以使用 this 这样您就可以对所有元素使用相同的代码，但这完全取决于您的 html 代码格式。

Here is an example.

$(document).ready(function() {
    $('.element').hover(function(){
        $(this).find(".cascading_menu").stop().slideDown();
    }, function(){
        $(this).find(".cascading_menu").delay(200).slideUp();
    });
});

注意:您还可以使用 delay(ms) 代替计时器。