Javascript 如何在用户单击一个菜单到另一个菜单时切换子菜单

当我们点击菜单C时，它会打开子菜单，但当我们点击B时，它会关闭C的子菜单，但不会打开B的子菜单（参见FIDLE）

如果有两个菜单B和C，那么点击其中一个应该打开它的子菜单并关闭另一个子菜单…我们如何才能做到这一点。 检查这把小提琴

---

小提琴在哪里？有人能检查一下吗？

    <div id="container" style="width: 250px;">
        <ul id="filter-menu-button-menu">
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>A</a>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>B</a> 
                <ul>
                    <li><a href="#">1A</a>
                    </li>
                    <li><a href="#">1B</a>
                    </li>
                    <li><a href="#">1C</a>
                    </li>
                    <li><a href="#">1D</a>
                    </li>
                    <li><a href="#">1E</a>     
                    </li>
                </ul>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-folder-open">  </span>C</a>
              <ul>
                   <li><a href="#">1A</a>
                    </li>
                    <li><a href="#">1B</a>
                    </li>
                    <li><a href="#">1C</a>
                    </li>
                    <li><a href="#">1D</a>
                    </li>
                    <li><a href="#">1E</a>     
                   </li>
            </ul>
        </div>

$('#filter-menu-button-menu').menu({
    "position": {
        my: "right top",
        at: "left top",
        collision: 'flipfit'
    }
});
$('#filter-menu-button-menu').unbind('mouseenter mouseleave');