笨重的JQuery选择器

我试图教自己一些简单的JQuery，并提出以下菜单系统。它是一个基于UL和LI的基本嵌套菜单，内部UL用JQuery.show（）显示，用.hide（）隐藏。HTML格式如下：-

    <ul id="menu1" class="gtrmenu">
        <li><span class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Single Menu</span> 
            <ul class="children">
                    <li><a href="#">Blah blah</a></li>
                    <li><a href="#">Drivel</a></li>
                    <li><a href="#">Select something</a></li>
                    <li><a href="#">Choose me!!</a></li>
            </ul>
        </li>
    </ul>

    <ul id="menu2" class="gtrmenu menugroup2">
        <li><span id="menu2click" class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Grouped Menu</span>    
            <ul class="children">
                    <li><a href="#">Something here</a></li>
                    <li><a href="#">More Stuff</a></li>
                    <li><a href="#">Waffle etc</a></li>
            </ul>
        </li>
    </ul>

    <ul id="menu3" class="gtrmenu menugroup2">
        <li><span id="menu3click" class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Search</span>  
            <ul id="searchX" class="children">
                <li>
                    <form>
                        <input id="search" type="text" name="firstname">
                    </form>
                </li>
            </ul>
        </li>
    </ul>        

    <p>The quick brown fox jumps over the lazy dog</p>

function gtrMenu(menuID, groupClass, clickElement) {

    if (clickElement === undefined) {
        clickElement = menuID;
    }

    $(menuID + ' ul').css("minWidth", $('#menu1').width());

    $(clickElement).click(
        function() {   

            if ($(menuID + ' ul.children').is(":hidden")) {

                // Close any open menus within the same group.
                if (groupClass !== undefined){
                    $('ul.gtrmenu.' + groupClass + ' li ul.children:visible').not(menuID).closest('ul.gtrmenu').each(function(index){
                        //console.log(index + " " + $(this).attr("id"));
                        $(this).find('li .parent img').removeClass('visible-bg').addClass('hidden-bg');
                        $(this).find('ul.children').hide();
                    });
                }

                // Change style of arrow image.
                $(menuID + ' li .parent img').removeClass('hidden-bg').addClass('visible-bg');

                // Display the submenu
                $(menuID + ' ul.children').show();

            }
            else {

                // Revert style of arrow image.
                $(menuID + ' li .parent img').removeClass('visible-bg').addClass('hidden-bg');

                // Hide the submenu.
                $(menuID + ' ul.children').hide();

            }
        }
    );
}

Javascript由以下程序运行（它不能作为上面HTML的一部分正确格式化，所以我在这里添加了它）：-

菜单可以是单个菜单，如“单个菜单”（菜单1）所示；或者它可以分组，如上面的“分组菜单”（与“搜索”一起分组）所示（menu2和menu3）。在分组菜单中，一次只能打开一个-如果用户打开“分组菜单”并单击“搜索”，则“分组菜单”关闭

我非常自豪地说，这一切都可以工作：-）然而，我在上面的组中查找打开菜单的选择器对我来说似乎很长而且很麻烦（这是注释掉的console.log行上方的一行）。我的问题是：是否有一种更简单的方法来查找组中已打开的菜单（以便它们可以关闭）

---

提前感谢。

只要您没有将相同的类用于其他目的，您实际上可以通过删除不必要的特殊性来缩短选择器。此外，您还可以使用

has

选择器删除

最近的

方法：

$('.gtrmenu.' + groupClass + ':has(.children:visible)').not(menuID)

这就是说，我建议你保留这种特异性，只是为了减少你选择不想选择的东西的可能性

$('ul.gtrmenu.' + groupClass + ':has(li ul.children:visible)').not(menuID)

---

明亮的我刚刚在：has（）上阅读了JQuery文档，这正是我所需要的。我认为，在找到正确的元素之前，沿着路径选择，然后退回到它的父元素，这不是最好的方法。

$('ul.gtrmenu.' + groupClass + ':has(li ul.children:visible)').not(menuID)