Воссоздание псевдоклассов CSS в jQuery - PullRequest
Новая
       4

Воссоздание псевдоклассов CSS в jQuery

1 голос
/ 01 июля 2010

Я пытаюсь добавить небольшую анимацию с помощью jQuery на панель навигации.Прямо сейчас у меня есть подменю навигационной панели, изменяющиеся с display: none на display: block с псевдоклассом css: hover.Как я уже сказал, я пытаюсь сделать это с помощью jQuery, поэтому мне нужно создать селектор, который был бы похож на тот, который я использовал в моем CSS.Я использовал селектор, который отображал бы только его дочерний список: 

#nav ul li:hover > ul

И это работало отлично, однако я, очевидно, не могу использовать псевдокласс: hover в селекторе jQuery, я пытался использоватьметод .hover (), подобный этому (пока без анимации): 

 $('#nav ul li').hover(function() {
 $('#nav ul li').children('ul').css('display','block');
 }, function() {
 $('#nav ul li').children('ul').css('display','none');
 });

Тем не менее, он показывает все подменю, если я наведите курсор на любой элементов списка.Вот несколько примеров jsfiddle:

Как это выглядит с css (и что я хочу воссоздать с jQuery): http://jsfiddle.net/FHdLC/

Результат кода jQuery выше: http://jsfiddle.net/LBK3T/

Большое спасибо за любую помощь, которую вы можете оказать!

1 Ответ

2 голосов
/ 01 июля 2010

Используйте this для ссылки на текущий элемент внутри обработчиков .hover(), например: 

$('#nav ul li').hover(function() {
   $(this).children('ul').css('display','block');
}, function() {
   $(this).children('ul').css('display','none');
});

Вот ваш примерработая с кодом выше :)

Кроме того, вы можете сократить его еще больше, используя .toggle(), например: 

$('#nav ul li').hover(function() {
   $(this).children('ul').toggle();
});​

Вы можете протестировать .toggle() версию здесь

...