раскрывающееся меню slideDown

0

поэтому я пытаюсь сделать небольшой эффект в моем выпадающем меню, но я не знаю, как правильно использовать функцию наведения и слайд-вниз

$('nav > div > ul > li').hover(function() {
    $('nav > div > ul > li > ul').stop(true, true).slideDown(200);
}, function() {
    $('nav > div > ul > li > ul').stop(true, true).slideUp(200);

});

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

РЕДАКТИРОВАТЬ: FIDDLE

  • 2
    Можете ли вы также опубликовать разметку? Еще лучше, вы можете создать jsFiddle?
  • 1
    да, см. редактировать :)
Показать ещё 3 комментария
Теги:
hover
slidedown

2 ответа

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

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

http://jsfiddle.net/MzJNT/2/

Я бы предложил добавить ID для селекторов, как показано ниже.

JS $ (document).ready(function() {

$('#parent').hover(function() {
    $('#submenu').stop(true, true).slideDown(200);
}, function() {
    $('#submenu').stop(true, true).slideUp(200);

});

 });

Я уверен, что есть более эффективный способ сделать это, но это хорошее начало.

РЕДАКТИРОВАТЬ

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

Удали это...

     nav > div > ul > li:hover > ul {
     display: block;
     }

или попробуйте эту скрипку http://jsfiddle.net/MzJNT/9/

Поделиться
  • 0
    Привет Трэвис, это просто не работает достаточно гладко. Это похоже на то, что он не использует скользящий эффект каждый раз, и он срабатывает только в том случае, если меню было показано и зависло раньше, но спасибо за спасибо за awnser :)
  • 0
    Затем измените длительность на что-то более 200, что СУПЕР быстро, но я использовал ваш код, попробуйте этот jsfiddle.net/MzJNT/7
Показать ещё 4 комментария
0

Вы можете просто добавить id к <li> который должен упасть.

HTML:

<li id="dropdown"><a href="#">Parent</a>

jQuery:

$('nav > div > ul > li#dropdown').hover(function() {

Скрипт: Fiddle

Кроме того, вы можете проверить <ul> внутри элемента:

jQuery:

$( document ).ready(function() {
    $('nav > div > ul > li').hover(function() {
        if (this.has('ul')) {
            $('nav > div > ul > li > ul').stop(true, true).slideDown(200);
        }
    }, function() {
        if (this.has('ul')) {
            $('nav > div > ul > li > ul').stop(true, true).slideUp(200);
        }
    });
});

Скрипт: Fiddle

Затем вы можете проверить <li> внутри этого, если хотите быть действительно конкретным.

Поделиться
  • 0
    Это работает для вас? Потому что я не получаю эффект слайда, я вижу только стандартный эффект отображения из CSS.
  • 0
    Нет, это странно. Я не совсем уверен, почему он это делает.
Показать ещё 2 комментария

Ещё вопросы

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