addClass, если ul существует (jQuery)

Question

Я строю простой выпадающий список, где я хотел бы добавить класс к родителю, если существует UL:

HTML:

<ul id="menu">
  <li><a href="#">Parent 1</a></li>
  <li><a href="#">Parent 2</a>
    <ul>
      <li><a href="#">Sub 2.1</a></li>
      <li><a href="#">Sub 2.2</a></li>
    </ul>
  </li>
</ul>

Итак, я бы хотел:

• скрыть все вложенные (ul#menu > li > ul) ul изначально
• показать / скрыть вложенный ul при наведении
• addClass "dropdown" для родителей, которые вложили в

Это не совсем работает, не знаю почему:

$(function () {
    $("ul#menu li").hover(function () {
        $(this).addClass("hover");
        $('ul:first', this).css('visibility', 'visible');
    },
    function () {
        $(this).removeClass("hover");
        $('ul:first', this).css('visibility', 'hidden');
    });
    $("ul#menu li ul li:has(ul)").find("a:first").addClass("dropdown");
});

Большое спасибо за вашу помощь!

Answer 1

var ul = $('#menu');

if (ul.length) {
    ul.children('li').hover(function() {
        $(this).children('ul').show();
    }, function() {
        $(this).children('ul').hide();
    }).children('ul').hide().parent().addClass('dropdown');
}

Демо: http://jsbin.com/ofayu

Кстати: вы неправильно закрываете теги <li> в своей разметке.

Answer 2

Вы писали:

$("ul#menu li ul li:has(ul)")

Учитывая вашу структуру HTML, не должно ли это быть:

$("ul#menu li:has(ul)")

Answer 3

Это должно выполнить трюк (не проверено):

$('ul#menu > li > ul').each(function()
{
    var list = $(this);
    list.hide();
    list.parent().hover(list.hide, list.show);
    list.parent().parent().addClass('dropdown');
});