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>

我想选择子菜单，但不是按类，当用户鼠标输入事件时我试过这样但是它没有工作

（文档）$。就绪（初始化）;

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

我不确定这是否是您所追求的，但将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>

会将subMenu放入菜单中，以便您的JavaScript实际将其滑出。您还必须确保只选择“外部”li。这是通过添加'＆gt;'来完成的到选择器：

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

Answer 2

<ul>不是<li>的孩子，而是兄弟姐妹。因此，请使用.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

试试这个：

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

帮助jquery选择器ul与级别

4 个答案: