Question

当用户在某个元素上移动鼠标时，我需要显示/隐藏级联菜单。使用悬停功能，使用jquery很容易实现：
N.B：定时器仅用于在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 of element hovering：id menu to show / hide ”的数组。
你认为有可能编写一个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)代替计时器。

Answer 2

我会将其设置为this，这将适用于具有深度的菜单，前提是每个带有子菜单的<li class="hoverli">都有一个无序列表（<ul class="file_menu">）的子菜单。 pass a duration（即零）到.hide()或.delay() will not work非常重要，因为它没有设置持续时间就不会使用效果队列。

<强> HTML：

<div id="button">
    <ul class="hover">
        <li class="hoverli">Hover over me!
            <ul class="file_menu">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>                
            </ul>
        </li>
        <li class="hoverli">or me!
            <ul class="file_menu">
                <li class="hoverli">submenu!
                    <ul class="file_menu">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                    </ul>
                </li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>                
            </ul>
        </li>
    </ul>
</div>

<强> JavaScript的：

$(".hoverli").hover(function(){
    $(this).find("ul").show();
}, function(){
    $(this).find("ul").delay(200).hide(0);
});

<强> CSS：

ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}
.menu_class {
    border:1px solid #1c1c1c;
}
.file_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
}
.file_menu li {
    background-color: white;
}

Answer 3

以下是＆＃34; Windows 7＆＃34;的一个很好的例子。样式级联菜单Fiddle

$(function(){
    $('.hasDropdown').hover(function(){
        $(this).find('ul:first').show();
    },function(){
        $(this).find('ul').hide();
    })

});

它将无限级联:-)理论

Answer 4

非常感谢您的回答。最后我写了这段代码，效果很好。问题是要显示的元素不是元素中的元素，所以我创建了两个数组，一个元素悬停，另一个元素显示，并将所有元素与 $组合在一起。每个功能。这是代码：

    $(document).ready(function() {

        var timer;
        var h1=["prof","notif_cont","explo"];
        var h2=[".profile",".notification",".explore"];
        $('.hover').hover(
            function(){
                var hoverrato=$(this).children(':first');
                $.each(h1, function(indice,checker){
                    if($(hoverrato).hasClass(checker)){
                        var index_hov=indice;
                        ul_show=h2[index_hov];
                        clearTimeout(timer);
                        $(ul_show).show(65);
                    }
                });

            },
            function(){
                timer = setTimeout(function(){$(ul_show).hide(65);},200);
            });

});

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

4 个答案: