jquery mouseenter правильно реализован?

У меня есть меню навигации, где в меню "отели" реализована скользящая панель. Это сценарий:

 $(document).ready(function(){

    $(".HotelPaneltrigger").mouseenter(function(){
        $(".panel").slideDown("slow");
        //$(this).toggleClass("active"); return false; 
    });

    $(".panel").mouseleave(function(){
        $(this).slideUp("slow");
    }); 
});

Теперь у меня есть 2 проблемы: .HotelPaneltrigger запускает панель (.panel), чтобы скользить вниз панель скользит вверх, как только мышь покидает область .panel

1-я проблема: зависание между моими «HotelPaneltrigger» и «.panel» приведет к тому, что панель будет скользить вверх и вниз несколько раз, поскольку обе функции выполняются, пока пользователь зависает между обоими элементами.

2-я проблема: определено, что панель скользит вверх, как только пользователь покидает область «.panel»

Какое решение вы рекомендуете: сдвинуть вниз панель на «HotelPaneltrigger» и оставаться открытой, пока пользователь находится в области «HotelPaneltrigger» + «.panel» ... и закрывается при наведении курсора на них?

Мне нужно избегать многократного скольжения вверх и вниз по панели, закрывая ее, когда пользователь уходит от инициирующей ссылки... не область .panel

Ваш вклад приветствуется

Код меню, который я использую:

        <ul class="primary_nav">  

                <li class="active"><a href="link to.php" class="hoverBtn">Link 1</a></li>
                <li class="HotelPaneltrigger"><a href="#" class="hoverBtn">Hotels</a></li>
                <li><a href="#" class="hoverBtn">Link 3</a>
                    <ul class="subnav">  
                        <li><a href="link to.php">Link 4</a></li>
                        <li><a href="link to.php">Link 5</a></li>
                    </ul>           
                </li>
                <li><a href="#" class="hoverBtn">Link 6</a>
                    <ul class="subnav">  
                        <li><a href="link to.php">Sub 1</a></li>
                        <li><a href="link to.php">Sub 2</a></li>
                        <li><a href="link to.php">Sub 3</a></li>        
                    </ul>
                </li>               

                <li class="last"><a href="link to.php" class="hoverBtn">Specials</a></li>           
        </ul>

jquery mouseover
person Grashopper    schedule 01.07.2011    source источник
comment
можно ли для этого создать jsfiddle? Мне трудно визуализировать проблему, как вы ее описываете.   -  person kinakuta    schedule 01.07.2011

Ответы (2)


arrow_upward
0
arrow_downward

Рабочий пример: http://jsfiddle.net/xmtpu/

В основном, поскольку это меню, вы помещаете панель внутри триггера и помещаете оба обработчика событий в триггер. Поскольку панель является дочерней, вы все еще «входите» в tirgger, даже когда ваша мышь находится над панелью.

person prodigitalson    schedule 01.07.2011
comment
Это именно то, что мне нужно prodigitalson :-) Но все еще запутался, так как у меня есть сценарий меню, в котором у меня есть ссылка на мои отели. См. выше - person Grashopper; 01.07.2011
comment
он попытался реализовать в моем существующем навигационном меню под ‹li class=HotelPaneltrigger›‹a href=# class=hoverBtn›Hotels ‹‹panel here›› ‹/a›‹/li›, но панель не появится. проверит еще раз, если это проблема css - person Grashopper; 01.07.2011
comment
это скорее всего так. в этом случае вы действительно хотите, чтобы триггерный элемент был li, а не a. Я попробую переделать скрипку, когда у меня будет время, если вы еще не поняли это к тому времени :-) - person prodigitalson; 01.07.2011
comment
Я сделал скрипку, чтобы проверить мое работающее меню навигации, включая вашу функцию. Либо функции конфликтуют, либо... это я :-) Вот пример: jsfiddle.net/pivi/PJjCy /15 - person Grashopper; 02.07.2011
comment
ну, вы не поверите, в чем была проблема: я использовал ваш class=hotelPanelTrigger, который отличается от моего calss=HotelPaneltrigger... что привело к тому, что панель не сработала. Теперь ваше решение работает как шарм :-) ... как мне расширить функцию с задержкой после закрытия панели, чтобы снова избежать многократного эффекта вверх / вниз? - person Grashopper; 02.07.2011
comment
Просто используйте плагин hoverIntent... вы сэкономите время и нервы :-) - person prodigitalson; 02.07.2011

arrow_upward
0
arrow_downward

Вы можете попробовать это;

$('.HotelPaneltrigger').hover(
    function () {
        // Show hidden content IF it is not already showing
        if($('.panel').css('display') == 'none') {
            $('.panel').slideDown('slow');
        }
    },
    function () {
        // Do nothing when mouse leaves HotelPaneltrigger
        $.noop();
    }
);

$('.panel').mouseleave(function () {
        $(this).delay('500').slideUp('slow');
});

Вы также можете попробовать плагин hoverIntent, если он не работает полностью — http://cherne.net/brian/resources/jquery.hoverIntent.html

person Christopher Thrower    schedule 01.07.2011
comment
ваше решение немного приближает его, задержка помогает предотвратить многократное срабатывание ... но панель по-прежнему закрывается только тогда, когда мышь покидает панель. - person Grashopper; 01.07.2011
comment
Попробуйте плагин hoverIntent, добавьте его, а затем измените функцию .hover на .hoverIntent. - person Christopher Thrower; 01.07.2011