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

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/