помогите с селектором jquery ul с уровнями

Question

У меня есть этот HTML

<ul id="menu">
    <li><input type="button" id="btnMenu-1" class="btnMenu" value="pitillo"></li>
        <ul class="subMenu">
            <li><input type="button" id="SubBtn-1" class="btnSubMenu" value="sub-pitillo"></li>
    </ul>
    <li><input type="button" id="btnMenu-2" class="btnMenu" value="tal"></li>
        <ul class="subMenu">
            <li><input type="button" id="subBtn-2" class="btnSubMenu" value="sub-tal"></li>
        </ul>
</ul>

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

$ (документ) .ready (инициализация);

function initialize(){
    $(".btnMenu").button();
    $("#menu li").hover(mouseEntry,mouseOut);
    $('.btnSubMenu').button();
}

function mouseEntry(){
    $('ul', this).slideDown(100);
 }

function mouseOut(){
    $('ul',this).slideUp(100);
}

это мое живое демо

Answer 1

<ul> - это не ребенок <li>, это брат или сестра. Так что используйте .next().

http://jsfiddle.net/9vLDy/28/

function mouseEntry(){
    $(this).next('ul').slideDown(100);
}

function mouseOut(){
    $(this).next('ul').slideUp(100);
}

Answer 2

Я не уверен, что это то, что вам нужно, но изменил HTML на:

<ul id="menu">
    <li><input type="button" id="btnMenu-1" class="btnMenu" value="pitillo">
        <ul class="subMenu">
            <li><input type="button" id="SubBtn-1" class="btnSubMenu" value="sub-pitillo"></li>
        </ul>
    </li>
    <li><input type="button" id="btnMenu-2" class="btnMenu" value="tal">
        <ul class="subMenu">
            <li><input type="button" id="subBtn-2" class="btnSubMenu" value="sub-tal"></li>
        </ul>
    </li>
</ul>

поместит подменю в меню, чтобы ваш JavaScript фактически выдвинул его. Вы также должны убедиться, что выбрали только «внешний» ли. Это делается добавлением «>» к селектору:

function initialize(){
    $(".btnMenu").button();
    $("#menu>li").hover(mouseEntry,mouseOut);
    $('.btnSubMenu').button();
}

Answer 3

Попробуйте это:

function initialize(){
    $(".btnMenu").button();
    $("#menu > li").hover(mouseEntry,mouseOut);
    $('.btnSubMenu').button();
}

function mouseEntry(){
    $(this).find('>ul').slideDown(100);
 }

function mouseOut(){
    $(this).find('>ul').slideUp(100);
}

Answer 4

Я не уверен на 100%, если вы этого хотите, но попробуйте изменить события mouseEntry / mouseOut на:

$("ul", $(this))