Так что я делаю сайт для кого-то, и я совсем новичок в jQuery (что, вероятно, не помогает). На сайте требовалось выпадающее меню для отображения ссылок на галереи в списке, а не на все они на панели навигации. Проблема в том, что всякий раз, когда я наводю курсор мыши на элемент li, раскрывающийся список скользит вниз, но когда я наводю курсор на раскрывающийся список, он снова перемещается вверх.

$(document).ready(function () {
  $("li#navi-dropdown").hover(
    function () {
      $('ul.nav-dropdown').slideDown('medium');
    }, 
    function () {
      $('ul.nav-dropdown').slideUp('medium');
    }
  );
});

Возможно, что-то простое, но помощь приветствуется. JSFiddle ниже.

http://jsfiddle.net/6e87Lwkb/

8
jammehcow 14 Дек 2015 в 15:20

3 ответа

Лучший ответ

Подумайте о том, чтобы поместить ваше подменю ul в свой li и переместить его. Не забудьте также использовать .stop (), так как jquery не ставит в очередь ваши анимации слайдов:

$('ul.nav-dropdown').stop().slideDown('medium');

См. Обновленную скрипку здесь

1
Robin Leboeuf 14 Дек 2015 в 12:48

Вы переключаете событие в обработчике me, вам нужно сделать это:

 $(document).ready(function () {
    $("li#navi-dropdown").on('mouseover',function () {
     $('ul.nav-dropdown').slideDown('medium');
  })

  $("ul.nav-dropdown").on('mouseleave',function () {
     $('ul.nav-dropdown').slideUp('medium');
  });
});

Я также обновил вашу скрипку, проверьте, она работает сейчас.

Вот моя скрипка:

http://jsfiddle.net/6e87Lwkb/7/

2
Franco 14 Дек 2015 в 13:45

Попробуйте с этим кодом.

$(document).ready(function () {
    $("li#navi-dropdown").hover(
  function () {
     $('ul.nav-dropdown').slideDown('medium');
  });
  $(".nav-dropdown").mouseleave(
  function () {
     $('ul.nav-dropdown').slideUp('medium');
  });
});
0
JengGe Chao 14 Дек 2015 в 12:57