帮助jquery选择器ul与级别

Question

I have this 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>

I want to select the sub menu but not by the class , in the moment when the user is in mouse enter event i tried like this but it doesn't work

$(document).ready(initialize);

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

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

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

this is my live demo

Answer 1

I'm not sure if this is what you're after but changing the HTML to:

<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>

will put the subMenu into the menu so that your JavaScript actually slides it out. You'll also have to make sure you select only the 'outer' li. This is done by adding a '>' to the selector:

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

Answer 2

The <ul> is not a child of the <li> , it's a sibling. So use .next() .

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

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

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

Answer 3

我不是100％确定这是否适合您，但请尝试将mouseEntry / mouseOut事件更改为：

$("ul", $(this))

Answer 4

Try this:

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);
}