Раскрывающееся меню slideDown
Поэтому я пытаюсь сделать небольшой эффект в выпадающем меню, но я не знаю, как правильно использовать функции hover и slideDown
$('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 ответа
Попробуйте эту скрипку
Я хотел бы предложить добавить идентификатор для селекторов, как показано ниже
JS $(документ).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/
Вы можете просто добавить идентификатор в <li>
это должно упасть.
HTML:
<li id="dropdown"><a href="#">Parent</a>
JQuery:
$('nav > div > ul > li#dropdown').hover(function() {
Скрипка: скрипка
Также вы можете проверить наличие <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);
}
});
});
Скрипка: скрипка
Затем вы можете проверить <li>
в этом, если вы хотите быть действительно конкретным.