在数组或元素中查找同一类的最顶层实例

Question

我正在进行简单的点击，以显示深入2级的下拉菜单系统并遇到一个可能很简单的问题：

我希望在打开另一个菜单时关闭任何打开的顶级菜单。

我在这里有一个超级简单的简化案例：http://jsfiddle.net/gaberino/z8AZR/2/没有打开关闭行为，只有边框颜色/活动状态的粗体文本。

基本上我想在点击另一个顶级项目时从任何顶级项目中删除.active类，但不影响第二级项目。我想将它全部保存在控制菜单其余部分的相同点击功能中。

简单的切换脚本就在这里。查看HTML的小提琴。没关系。对？这是一堆或嵌套的列表项，并且缩进以便在此处正确格式化是一种痛苦。

jQuery的：

$('.handle').on("click", function(e){
    var $this = $(this),
        $panel = $this.next('.panel');
    e.preventDefault();
    $this.toggleClass('active');
    $panel.toggleClass('active');
});

HTML：

<ul>
    <li>
        <a href="#" class="handle">handle</a>
        <ul class="panel">
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul class="panel">
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>#
                <a href="" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="handle">handle</a>
        <ul class="panel">
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="handle">handle</a>
        <ul class="panel">
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="handle">handle</a>
        <ul class="panel">
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>
                <a href="#" class="handle">handle</a>
                <ul class="panel">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>