Потеря информации выпадающего списка при наведении мыши - PullRequest
Новая
       6

Потеря информации выпадающего списка при наведении мыши

0 голосов
/ 12 марта 2012

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

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

    $('.myMenu > li').bind('mouseover', openSubMenu);
function openSubMenu() { 
         $('.myMenu').css('overflow','auto');
         $('.myMenu').css('height','400px');
         $('.ulMenu').css('visibility', 'visible');
};
$('.myMenu > li').bind('mouseout', closeSubMenu);
function closeSubMenu() {
         $('.myMenu').css('overflow','hidden');
         $('.myMenu').css('height','20px');
       $('.ulMenu').css('visibility', 'hidden');
  }
}
</script>




<div id="menu">
  <ul class="myMenu">
    <li id="li_left"><a href="#">   Application </a></li>
      <li id="li"> <a href="#"> Hover For Listing</a>
          <ul id="tasksUl" class="ulMenu">
          </ul>
        </li>
    </ul>
</div>

1 Ответ

1 голос
/ 12 февраля 2013

Я думаю, что вы также должны опубликовать свой .css для списка. Я думаю, у вас есть меню, и вы хотите открыть список при наведении <li id="li"> <a href="#"> Hover For Listing</a>

Вы устанавливаете 

$('.myMenu').css('height','20px');

и я не понимаю, почему ты это сделал. Также ваши стили .css в значительной степени устарели.

Проверьте скрипку здесь: http://jsfiddle.net/eR2y9/1/

Работает как шарм. Вам не нужно добавлять высоту для меню, потому что оно динамически корректируется в зависимости от количества записей внутри. Кроме того, если не отображать ничего, это не займет места. Если у вас есть дополнительные вопросы или я неправильно понял вашу проблему, не стесняйтесь отвечать на мой пост, и я найду решение для вас.

...