Question

我遇到了jQuery的问题。

我正在使用带有子菜单的jQuery进行移动菜单。我需要使用相同的类来激活所有菜单，因为它们将动态创建，但是当我这样做时，当我点击某个项目时，所有其他菜单也会显示它们的子项目。

要清楚，这是一个例子：

<ul>
    <li class="OpenMenu"><a href="javascript:void(0);">Menu 1</a>
        <ul class="sub-item">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li class="OpenMenu"><a href="javascript:void(0);">Menu 2</a>
        <ul class="sub-item">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li class="OpenMenu"><a href="javascript:void(0);">Menu 3</a>
        <ul class="sub-item">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

我需要每个菜单仅在单击时显示其子项，但都使用相同的类。我正在用jQuery做菜单的“开放”效果。

Answer 1

您可以通过以下代码实现，find()方法将深入查看其子项并查找子项

$(".OpenMenu").click(function(){
$(this).find('.sub-item').show();

});

DEMO （仅涵盖显示所需的子菜单）

要查看如何隐藏其他子项并仅显示当前项，请使用此http://jsfiddle.net/Lboyrqnc/2/

多个元素使用同一个类时的优先级

1 个答案: