Question

我正在开发一个菜单，它有级别，每个级别的菜单都有自己的样式，从第三级开始所有级别都有相同的样式称为subMenRight我的问题是，如果你在使用样式subMenu调用的第二级打开所有跟随div，其中包含名为subMenuRight的类我知道问题是选择器，所以我的问题是如何修改选择器？

my live example

我的HTML

<div id="menuContainer">
    <div class = "menu ui-accordion-header ui-state-default ui-corner-all">
        <label class="formatText">Cliente</label><span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span>
            <div class = "subMenu ui-accordion-header ui-state-default ui-corner-all">
                <ul class="options">
                    <li>
                        <label class="formatText">Ver Cliente</label><span class="ui-icon ui-icon-triangle-1-e" style="float: right"></span>
                            <div class = "subMenuRight ui-accordion-header ui-state-default ui-corner-all">
                                <ul class="options">
                                    <li>
                                        <label class="formatText">Por Nombre</label><span class="ui-icon ui-icon-triangle-1-e" style="float: right"></span>
                                            <div class = "subMenuRight ui-accordion-header ui-state-default ui-corner-all">
                                                <ul class="options">
                                                    <li><label class="formatText">sub sub menu</label></li>
                                                    <li><label class="formatText">prueba</label></li>
                                                </ul>
                                            </div>
                                    </li>
                                    <li>
                                        <label class="formatText">Por Campana</label>
                                    </li>
                                </ul>
                            </div>
                    </li>
                    <li>
                        <label class="formatText">Reportes para Cliente</label>
                    </li>
                </ul>
            </div>
    </div>
    <div class = "menu ui-accordion-header ui-state-default ui-corner-all">
        <label class="formatText">Departamento</label><span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span>
            <div class = "subMenu ui-accordion-header ui-state-default ui-corner-all">
                <ul class="options">
                    <li>
                        <label class="formatText">Por Nombre</label>
                    </li>
                    <li>
                        <label class="formatText">Por Cliente</label>
                    </li>
                </ul>
            </div>
    </div>
</div>

我的css

        #menuContainer
    {
        position: absolute;    
    }

    #menuAtento
    {
        height: 23px;
        padding-left: 8px;
        padding-top: 12px;
    }

    .menu
    {
        /*min-width: 100px;
        max-width: 155px;*/
        width: 155px;
        height: 17px;
        float: left;
    }

    .subMenu
    {
        display: none;
        width: 155px;
    }

    .subMenuRight
    {
        display: none;
        width: 155px;
        position: absolute;
        left: 100%;
        top: 0px;
    }

    .options li
    {
        position: relative;
        padding: 0px 2px 0px 0px;
    }

    .menu .ui-state-hover
    {
        border-width: 0;
        margin-right: 2px;
    }

    .subMenu .ui-state-hover
    {
       border-width: 0;
    }

my js

$(document).ready(initialize);

function initialize() {

$(".menu").hover(mouseIn, mouseOut);
    $(".options li").hover(overOption, outOption);
    $(".subMenu li").hover(openRightMenu, closeRightMenu);
    $(".menu").css('border', '0px');
    $(".menu").css('margin-right', '5px');
    $(".subMenu").css('margin-top', '4px').css('border', '1px solid #DDDDDD').css('padding', '6px');
    $(".subMenuRight").css('padding', '6px');
}

function mouseIn() {
    $(this).find('span:first').attr('class', '');
    $(this).find('span:first').attr('class', 'ui-icon ui-icon-triangle-1-s');
    $(".subMenu", this).slideDown(100);
}

function mouseOut() {
    $(this).find('span:first').attr('class', '');
    $(this).find('span:first').attr('class', 'ui-icon ui-icon-triangle-1-e');
    $(".subMenu", this).slideUp(100);
}

function overOption() {
    $(this).attr('class', 'ui-state-hover ui-corner-all');
}

function outOption() {
    $(this).attr('class', '');
}

function openRightMenu() {
    $(".subMenuRight", this).slideDown(10);
}

function closeRightMenu() {
    $(".subMenuRight", this).slideUp(10);
}

Answer 1

Demo

$(".subMenuRight", this).slideDown(10);

需要

$(this).find(".subMenuRight:first");

和类似的

Answer 2

我个人会使用Superfish（http://users.tpg.com.au/j_birch/plugins/superfish/）。使用IE6等会更容易。

帮助子节点的jquery选择器

2 个答案:

Demo