Использование jQuery и div с абсолютным позиционированием для выпадающего меню - PullRequest
Новая
       32

Использование jQuery и div с абсолютным позиционированием для выпадающего меню

2 голосов
/ 06 февраля 2012

Я решил использовать плавающие div для моего выпадающего меню, потому что я могу применить тень и закругленные углы.

У меня есть следующий элемент списка: 

<li class="navDrop" id="navEvents"><a href="#">Events</a></li>

И следующий div, соответствующий пункту меню: 

<div class="navSub" id="navEventsDrop"> Events </div>

В настоящее время я использую следующий скрипт для обработки показа / скрытия элементов (обратите внимание, что я заставил его применить обработчики к классу, который связывает li и соответствующие идентификаторы div): 

<script type="text/javascript">
$(".navDrop").mouseenter(
  function () {
    $('#'+this.id+'Drop').css({
          position:'absolute',
          top: $(this).offset().top + $(this).height() + 'px',
          left: $(this).offset().left + 'px',
          zIndex:1000
    }).show();
});

$(".navDrop").mouseleave(
  function () {
    $('#'+this.id+'Drop').hide();
});
</script>

Моя проблема в том, что после того, как курсор покинул li, div исчезает, независимо от того, находится ли курсор над тегом div.

Я просто не могу найти решение этой проблемы, кроме размещения div внутри класса .navDrop. Но я попытался сделать это, и это просто странно позиционирует div.

Спасибо.

1 Ответ

0 голосов
/ 06 февраля 2012

Попробуйте обернуть каждый элемент 

<div class="navItem">
  <li class="navTitle" id="navEvents"><a href="#">Events</a></li>
  <div class="navContent" id="navEventsDrop" style="display:none"> Events </div>
</div>

Тогда jQuery: 

$('.navItem').mouseenter(function() {
   $(this).children('.navContent').show();
})

$('.navItem').mouseleave(function() {
   $(this).children('.navContent').hide();
})
...