Jquery Выбор элемента

0

Извините, я новичок в этом. У меня проблема с выбором элемента внутри моего навигационного списка

<ul class="subnav">
<li><a href="#">Link 1</a><span class="sub">Description 1</span></li>
<li><a href="#">Link 2</a><span class="sub">Description 2</span></li>
<li><a href="#">Link 3</a><span class="sub">Description 3</span></li>
</ul>

Я ищу, чтобы создать функцию, которая, когда пользователь наводится на ссылку 1, должен отображаться только текст описания 1.

Ниже мой JQUERY

$('ul.subnav li a').hover(function() {

    $('.sub').animate({opacity: "show", top: "5"}, "slow");
}, function() {
    $('.sub').animate({opacity: "hide", top: "-5"}, "slow");
});

Проблема, с которой я сталкиваюсь, - это когда пользователь наводится на любую ссылку, появится весь текст описания. Как я могу показать JQUERY, чтобы показать только описание, где мышь зависает?

Большое спасибо.

Теги:

2 ответа

3
Лучший ответ

Вы можете использовать $(this) чтобы получить ссылку только на якорь, который в настоящее время .next() вместе с .next() чтобы анимировать только элемент span который является следующим ближайшим родственником вашего зависающего якоря:

$('ul.subnav li a').hover(function() {
    $(this).next().animate({opacity: "show", top: "5"}, "slow");
}, function() {
   $(this).next().animate({opacity: "hide", top: "-5"}, "slow");
});
Поделиться
  • 1
    или $(this).closest('li').find('.sub')
  • 0
    @MarianTheisen Да, это альтернатива, но .next() в этом случае будет быстрее.
Показать ещё 2 комментария
0

@Felix имеет отличный ответ, но вы также можете использовать .siblings() с вашей разметкой.

$('ul.subnav li a').hover(function() {
    $(this).siblings().animate({opacity: "show", top: "5"}, "slow");
}, function() {
    $(this).siblings().animate({opacity: "hide", top: "-5"}, "slow");
});

http://jsfiddle.net/bUZ8j/

Поделиться
  • 0
    Спасибо Dryden, это прекрасно работает! Ура!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню