JQuery выпадающий вопрос

Question

Я пишу свой собственный простой выпадающий список ... и он не очень хорошо.

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

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

Спасибо за помощь !!!

Мой основной HTML:

            <ul>
                <li class="media drop-down"><a href="#">Link</a>
                    <ul class="sub-menu">
                        <li>
                        This is stuff!
                        </li>
                    </ul>
                </li>
            </ul>

My JQuery

$('.sub-menu').hide();
var menu = $('.drop-down').children('ul');
var down = function (x) {menu.stop().slideDown(); }
var up = function (x) {menu.stop().slideUp(); }
$("li.drop-down").hover(down, up);//show/hide buttons   

Answer 1

Это должно сделать это - запишите контекст как второй параметр для $.

$('.sub-menu').hide();
var down = function (x) {$('ul.sub-menu', this).stop().slideDown(); }
var up = function (x) {$('ul.sub-menu', this).stop().slideUp(); }
$("li.drop-down").hover(down, up);//show/hide buttons

Answer 2

Эта строка

var menu = $('.drop-down').children('ul');

возвращает набор всех элементов ul, которые являются прямыми дочерними элементами класса с раскрывающимся списком. Что вы, вероятно, хотите сделать, это включить следующее в каждую из ваших функций повышения и понижения:

var menu = $(this).children('ul');