懸停元素時顯示/隱藏級聯菜單

Question

當用戶在某個元素上移動鼠標時，我需要顯示/隱藏級聯菜單。 使用hover函數，使用jquery可以很容易地實現這一點：
注意：計時器僅用於在200毫秒后隱藏菜單，並不重要。

$(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代碼格式。

這是一個例子。

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

注意：您也可以使用delay(ms)代替計時器。

Answer 2

我將像這樣進行設置，只要每個<li class="hoverli">帶有子菜單的子菜單都是無序列表（ <ul class="file_menu"> ），它將對具有深度的菜單<ul class="file_menu"> 。 到是很重要的傳遞持續時間 （即零）到.hide()或.delay() 將無法工作 ，因為它不沒有在設定時間使用效果隊列。

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

這是“ Windows 7”樣式級聯菜單小提琴的一個很好的例子

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

});

它會無限深地級聯:-)理論上

Answer 4

非常感謝您的回答。 最后，我編寫了這段代碼，效果很好。 問題在於要顯示的元素不是該元素懸停的兒子，因此我創建了兩個數組，一個數組具有懸停的元素，另一個數組具有要顯示的元素，並將所有與$ .each函數結合在一起。 這是代碼：

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

});