Выпадающее меню подменю jQuery при нажатии кнопки

Question

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

Элементы меню создаются с помощью wordpress, поэтому мне нужно добавить кнопку «+», если в меню отображается «.has-dropdown» класса. Я соединил код последующего до сих пор, но это не работает:

jsfiddle

$(".clicktodrop").insertAfter(".has-dropdown"); 

$(function() { 
    $(".clicktodrop").hover(function() { 
     $(this).children("ul.dropdown").slideDown(200); 
    }, function() { 
     $(this).children("ul.dropdown").slideUp(200); 
    }); 
}); 

Будет надеяться, что jsfiddle должен показать вам, что я пытаюсь достичь, если объяснение выше не имеет смысла! Может ли кто-нибудь увидеть, как сделать эту работу?

Answer 1

$(function() { 
    $(".clicktodrop").hover(function() { 
     $(this).next(".dropdown").slideDown(200); 
    }, function() { 
     $(this).next(".dropdown").slideUp(200); 
    }); 
}); 

Fiddle

Answer 2

Использование next() вместо children:

$(this).children("ul.dropdown") 

должен быть изменен на

$(this).next("ul.dropdown")