Мышиный центр jQuery вместо on ('mouseenter')

0

Привет, я хочу знать, как я могу дублировать следующее поведение, используя метод ярлыков jQuery для mouseenter, связанный с использованием mouseenter с помощью метода on() jQuery.

базовый код: html

<dl>
    <dt>tab 1</dt>
    <dd>info.</dd>
    <dt>tab 2</dt>
    <dd>info.</dd>
    <dt>tab 3</dt>
    <dd>info.</dd>
</dl>

jQuery -

$('dl').on('mouseenter', 'dt', function() {
    $(this)
        .next()
            .slideDown(200)
});

поэтому приведенное выше поведение, когда только элементы 'dt' находятся в коллекции jQuery, используя следующий ярлык.

$('dl').mouseenter(function() {
    $(this)
        .next()
            .slideDown(200)
});

jsfiddle:

http://jsfiddle.net/3ZWsS/

благодаря

  • 0
    прочитайте документы для next () api.jquery.com
Теги:

2 ответа

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

Поскольку вы нацеливаете элементы dt под элементом dl, вам необходимо использовать селектор потомков

$('dl dt').mouseenter(function () {
    $(this).next().slideDown(200)
});

Демо: скрипка

Поделиться
  • 0
    Спасибо, но проблема в том, что у меня много элементов dt и dd. Я хочу подключить обработчик событий только один раз (к dl), иначе это снизит производительность, подключая его много раз. Извините, я забыл упомянуть об этом раньше.
  • 0
    в этом случае вы должны использовать on в .mouseenter() синтаксис не допускает делегирование событий
Показать ещё 1 комментарий
0

Вы можете использовать это тоже

$('dl').find('dt').mouseenter(function () {
   $(this).next().slideDown(200)
});

Демо-версия

Поделиться
  • 0
    Спасибо, но опять-таки это прикрепит обработчик событий к каждому dt, который у меня правильный? Это будет большой удар по производительности, к сожалению.

Ещё вопросы

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