Показать / Скрыть каскадное меню при наведении на элемент

Question

Показать / Скрыть каскадное меню при наведении на элемент

0

Мне нужно показать/скрыть каскадное меню, когда пользователь переместит мышь на определенный элемент. Это довольно легко достичь с помощью jquery, используя функцию наведения:
NB: таймер используется только для скрытия меню после 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 of element hovering: id menu to show/hide".
Как вы думаете, можно ли написать функцию jQuery, которая, учитывая этот массив элементов, обеспечивает отображение каждого меню без необходимости записывать этот код дюжину раз?

Andy Wall 06 апр. 2014, в 22:58

Источник

0

не могли бы вы предоставить скрипку?
Anubhav 06 апр. 2014, в 21:14
0

Вы можете удалить setTimeout и использовать вместо него .delay(200) (я знаю, вы сказали, что эта часть не важна, но она экономит несколько строк)
royhowie 06 апр. 2014, в 21:25

Теги:

javascript

jquery

html

css

4 ответа

0

Вы можете использовать this чтобы вы могли использовать один и тот же код для всех элементов, но все зависит от вашего форматирования HTML-кода.

Вот пример.

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

Примечание. Вы также можете использовать delay(ms) вместо таймера.

Toni Almeida 06 апр. 2014, в 20:29

0

Вот хороший пример каскадного меню стиля "Windows 7" Fiddle

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

});

он будет каскадно бесконечно глубоко :-) в теории

James Harrington 06 апр. 2014, в 20:05

0

Я бы поставил его, как это, который будет работать для меню с глубиной, при условии, каждый <li class="hoverli"> с подменю имеется подменю, которое неупорядоченный список (<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;
}

royhowie 06 апр. 2014, в 19:59

Ещё вопросы

не могли бы вы предоставить скрипку?
Вы можете удалить setTimeout и использовать вместо него .delay(200) (я знаю, вы сказали, что эта часть не важна, но она экономит несколько строк)

Andy Wall · Accepted Answer · 2014-04-07T15-30-00.000Z

Большое спасибо за ваши ответы. В конце я написал этот код, который работает довольно хорошо. Проблема заключалась в том, что элементы, отображающие weren'e сыновья элемента, зависали, поэтому я создал два массива, один с зависающим элементом, а другой с отображаемым элементом и объединил все с функцией $.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);
            });

});