jQuery菜单中的条件行为

从我的第一个问题开始的一天，我不敢说我回来了。不过这次的问题不同了

我有一个带有一些嵌套菜单的水平菜单，如下所示：

<nav>
    <ul id="mainNav">
        <li><a href="expand-the-sub-menu">Option 1</a>
            <ul id="option1Nav">
                <li><a href="somewhere">Option 1 Link 1</a></li>
                <li><a href="somewhere">Option 1 Link 2</a></li>
                <li><a href="somewhere">Option 1 Link 3</a></li>
                <li><a href="somewhere">Option 1 Link 4</a></li>
                <li><a href="somewhere">Option 1 Link 5</a></li>
            </ul>
        </li>
        <li><a href="expand-the-sub-menu">Option 2</a>
            <ul id="option2Nav">
                <li><a href="somewhere">Option 2 Link 1</a></li>
                <li><a href="somewhere">Option 2 Link 2</a></li>
                <li><a href="somewhere">Option 2 Link 3</a></li>
                <li><a href="somewhere">Option 2 Link 4</a></li>
                <li><a href="somewhere">Option 2 Link 5</a></li>
            </ul>
        </li>
        <li><a href="somewhere">Option 3</a></li>
        <li><a href="somewhere">Option 4</a></li>
        <li><a href="somewhere">Option 5</a></li>
        <li><a href="somewhere">Option 6</a></li>
    </ul>
</nav>

简言之：所有子菜单都应该隐藏，如果它们作为单击的同级菜单显示，则应该显示/交换，否则应该全部隐藏

可悲的是，它不太管用，除了“交换”部分，它几乎管用——如果一个子菜单已经可见，而另一个子菜单被触发显示，两者最终都被显示，并且单击的元素消失（！）

这可能也是很糟糕的代码——我对它还是很陌生的——但是如果有人能在逻辑部分提供帮助，我可以在以后处理这些事情

---

编辑--现在奇怪的是根本不工作：（

尝试使用此

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
       $('#mainNav ul').fadeOut(300);
    $(this).find('ul').fadeIn(300);
});​

试试这个：

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
    var elm = this;
    $('nav').animate({
                bottom:'60px',
                duration:300,
                easing:'easeOutQuint'
            },function(){  
                    $(elm).find('ul').fadeIn(300);
            });
    $('#mainNav ul').fadeOut(300);
});

这是JSFIDLE：

---

终于让它工作起来了。多亏了那些贡献的人——如果没有你的帮助，我现在几乎肯定还是会被困在这里

---

谢谢，除了移动来容纳额外的元素外，这差不多就到了。还有一个问题-为什么只针对#mainNav>li元素？@verism在下拉菜单中，我们通常会让整个li可点击。jsidle添加了-谢谢。谢谢你-这与我的目标非常接近。唯一缺少的操作是发送如果没有子菜单打开，则返回。但是，再次感谢您-我无法相信我的尝试有多复杂。编辑-还注意到，即使子菜单不存在，菜单也会上升。

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
    var elm = this;
    $('nav').animate({
                bottom:'60px',
                duration:300,
                easing:'easeOutQuint'
            },function(){  
                    $(elm).find('ul').fadeIn(300);
            });
    $('#mainNav ul').fadeOut(300);
});