jQuery проблема при наведении мыши на 2-й - PullRequest
Новая
       32

jQuery проблема при наведении мыши на 2-й

0 голосов
/ 16 ноября 2009

У меня есть меню со следующим кодом: 

    <div id="head_navigation">
     <ul>
         <li><a href="javascript:void(0);"><img src="img/start.jpg" width="57" height="40" title="start" alt="" /></a></li>
         <li><a href="javascript:void(0);"><img src="img/favoriten.jpg" width="87" height="40" title="favoriten" alt="" /></a></li>
        </ul>
    </div>

    <div id="head_subnavigation">
     <ul id="start" class="hidden">
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');" title="Rezeptsuche"><img src="img/icons/icon_rezeptsuche_on.png" width="50" height="62" alt="Rezeptsuche" /><br />Rezeptsuche</a></div></li>
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');"><img src="img/icons/icon_zuzahlung_on.png" width="50" height="62" alt="Zuzahlung" /><br />Zuzahlung</a></div></li>
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');"><img src="img/icons/icon_abrechnung_on.png" width="50" height="62" alt="Abrechnung" /><br />Abrechnung</a></div></li>
        </ul>
    </div>

«# head_subnavigation» имеет CSS «display: none». При наведении курсора на изображение с заголовком «начало» отображается

Ответы [ 2 ]

0 голосов
/ 16 ноября 2009

Самый быстрый способ - это обернуть все ваше меню в больший DIV и скрыть меню в событии mouseout этого DIV. Вам также следует убедиться, что в каждый момент времени отображается только одно подменю (например, скрытие открытого меню при отображении нового).

0 голосов
/ 16 ноября 2009

Вы можете сделать это: 

$('#head_navigation li a').hover(function(){

    // Hide the visible subnavigations
    $('#head_subnavigation ul:visible').css('display','none');

    // Show the appropriate subnavigation
    $('#head_subnavigation ul#' + $(this).attr('title')).css('display','block');

});

Таким образом, видимые в настоящее время ul #head_subnavigation скрываются, когда вы наводите курсор мыши на новую навигационную панель верхнего уровня li. Вы должны обернуть всю навигацию в div для обработки события mouseout, когда пользователь полностью покидает область меню. 

$('#navigationDiv').mouseout(function(){

    $('#head_subnavigation ul:visible').css('display','none');

});

Проблема с оберточным div заключается в том, что если меню выходит за пределы div, событие mouseout сработает, скрывая ваше меню. Есть другой подход, который вы могли бы использовать ... 

// Globals
var menuHoverTimer = 0;
var menuHoverTimerLimit = 3; // 3 seconds
var menuHoverTimerIntervalID;

function stopHoverTimer(){
    clearInterval(menuHoverTimerIntervalID);
}
function resumeHoverTimer(){
    // This will run the menuHoverHandler function every 1 second
    menuHoverTimerIntervalID = setInterval(menuHoverHandler, 1000);
}
function menuHoverHandler(){
    menuHoverTimer++;
    if(menuHoverTimer > menuHoverTimerLimit) {
        stopHoverTimer();
        $('#head_subnavigation ul:visible').css('display','none');
        menuHoverTimer = 0;
    }
}

Затем в каждом из ваших действий при наведении курсора при наведении курсора мыши запустите stopHoverTimer () и при наведении курсора мыши запустите resumeHoverTimer (); Как я настроил, он будет скрывать меню через 3 секунды, если пользователь не будет наводить курсор на меню. Я думаю, вы можете хотеть, чтобы это было короче.

...